diff --git a/web/bun.lock b/web/bun.lock
index 7f85970d..fec342ca 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -9,7 +9,6 @@
         "@bytemd/plugin-gfm": "^1.22.0",
         "@bytemd/react": "^1.22.0",
         "@fontsource-variable/geist": "^5.3.0",
-        "@headlessui/react": "^2.2.10",
         "@heroicons/react": "^2.2.0",
         "@shikijs/core": "^4.4.3",
         "@shikijs/engine-javascript": "^4.4.3",
@@ -52,6 +51,7 @@
         "@types/react-dom": "^19.3.0",
         "autoprefixer": "^10.5.6",
         "esbuild": "^0.28.1",
+        "oxlint": "^1.83.0",
         "postcss": "^8.5.28",
         "postcss-import": "^16.2.0",
         "postcss-nesting": "^13.0.2",
@@ -197,26 +197,16 @@
 
     "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
 
-    "@floating-ui/react": ["@floating-ui/react@0.26.28", "", { "dependencies": { "@floating-ui/react-dom": "^2.1.2", "@floating-ui/utils": "^0.2.8", "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw=="],
-
     "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.9", "", { "dependencies": { "@floating-ui/dom": "^1.8.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg=="],
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
 
     "@fontsource-variable/geist": ["@fontsource-variable/geist@5.3.0", "", {}, "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA=="],
 
-    "@headlessui/react": ["@headlessui/react@2.2.10", "", { "dependencies": { "@floating-ui/react": "^0.26.16", "@react-aria/focus": "^3.20.2", "@react-aria/interactions": "^3.25.0", "@tanstack/react-virtual": "^3.13.9", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-5pVLNK9wlpxTUTy9GpgbX/SdcRh+HBnPktjM2wbiLTH4p+2EPHBO1aoSryUCuKUIItdDWO9ITlhUL8UnUN/oIA=="],
-
     "@heroicons/react": ["@heroicons/react@2.2.0", "", { "peerDependencies": { "react": ">= 16 || ^19.0.0-rc" } }, "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ=="],
 
     "@hono/node-server": ["@hono/node-server@2.1.1", "", { "peerDependencies": { "hono": "^4" } }, "sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg=="],
 
-    "@internationalized/date": ["@internationalized/date@3.12.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ=="],
-
-    "@internationalized/number": ["@internationalized/number@3.6.8", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-8UmMFia46DUt+k97zKd9fKWXcWHR+k8ae3eYzILETuT2KbIvLyOfac7zesw+sJdRAAZ7Q9pM1Mk22aXp2LD0Ig=="],
-
-    "@internationalized/string": ["@internationalized/string@3.2.10", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-PDx6//vHSpRnHfxqMqto11zQvhsaU74O3mKv2F/0eicGZcl9NLjQmGlbHz/LsJh5tLKp4A4L7ZVTzN1/MmMTvA=="],
-
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -237,6 +227,44 @@
 
     "@oxc-project/types": ["@oxc-project/types@0.149.0", "", {}, "sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA=="],
 
+    "@oxlint/binding-android-arm-eabi": ["@oxlint/binding-android-arm-eabi@1.83.0", "", { "os": "android", "cpu": "arm" }, "sha512-0yGY24EwsLk5YDe6F+VkmZyRHSwJDALa3nIrPpq7FXmp2lV2d0TzvBCGeZk+wgiULRGr5blhyr4QMp5KCXJUqA=="],
+
+    "@oxlint/binding-android-arm64": ["@oxlint/binding-android-arm64@1.83.0", "", { "os": "android", "cpu": "arm64" }, "sha512-hHfJ0vc17A4iUjH5p9BsTUPYbYRNxGpvD2lbu1aBRk54bzNIx9o5TtYF39QPZcV95DagZd+4DEAw2RH3G2ZsMg=="],
+
+    "@oxlint/binding-darwin-arm64": ["@oxlint/binding-darwin-arm64@1.83.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-hsOjYjszLb/3zym/TkzUMPAoQlTJcuzSyEPOAyA+skXJIX9M0o+4JfOtqopX/Vf4hSLrJ98j0nvFo23gzk8auQ=="],
+
+    "@oxlint/binding-darwin-x64": ["@oxlint/binding-darwin-x64@1.83.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-mjh5oH2EA+wl5yRJYT9K9G61O2zFlpuv+yf2JwZOi0+dq2FnTUtm1h8i+5Ik0fXPWIu/k84I1psZR9aQsLAnyA=="],
+
+    "@oxlint/binding-freebsd-x64": ["@oxlint/binding-freebsd-x64@1.83.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-fNHr64/YaO8YssuoDVC8+F4Uk5enR86q5uxfHkQrjAPs1dbAILOrD2uaud+J7MO8Fx774g44ERLD0IGIvZE48w=="],
+
+    "@oxlint/binding-linux-arm-gnueabihf": ["@oxlint/binding-linux-arm-gnueabihf@1.83.0", "", { "os": "linux", "cpu": "arm" }, "sha512-Qpwy3zzAwMj+8/lyYItHmkSMwbkprFNWTK7jPYDOxSyxEhaSLOWYUTCMkjF334J8/WD0nznCCsoBbIH6hpsuIw=="],
+
+    "@oxlint/binding-linux-arm-musleabihf": ["@oxlint/binding-linux-arm-musleabihf@1.83.0", "", { "os": "linux", "cpu": "arm" }, "sha512-s+BirYLFq7JL2k9sP0XI3ZXJ9dYvJ8sX3jLCLoag7tt+zrSHpZxP0jqznfL+Gdgwu7ay0dYgGYJXrQvq3iWloA=="],
+
+    "@oxlint/binding-linux-arm64-gnu": ["@oxlint/binding-linux-arm64-gnu@1.83.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-7lihXt3vKr+GIyapNbHrnFHm/biiW30le6Zv/DExbAFPF6YwCQXVFlONPFehxs0CpGO4CBfYPM9rdDT+XMoIlg=="],
+
+    "@oxlint/binding-linux-arm64-musl": ["@oxlint/binding-linux-arm64-musl@1.83.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-q63JalLYVkZiZvls1z3PPUnpmQluOMXp0khqQMznCeAPLGydfNY8JhvuA4WlK57JfrvikU8wB5lPVveqpIXvew=="],
+
+    "@oxlint/binding-linux-ppc64-gnu": ["@oxlint/binding-linux-ppc64-gnu@1.83.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-krQmDF+dRbxvdqVPV88ZuOoPPu8X5BuqDA8Hd+qcS4YMRQCb+nexA57DazgGsc/rGdKBe3QmV0mnv0bdpW/p5g=="],
+
+    "@oxlint/binding-linux-riscv64-gnu": ["@oxlint/binding-linux-riscv64-gnu@1.83.0", "", { "os": "linux", "cpu": "none" }, "sha512-MmOl8Y6txEAXZU1RG8Rr264jQ6D7VPmqFsU/45x/FeWsGe32hklTqGrLE6UxHzp5Rjt0wP+20tY8YXKgSFB3mw=="],
+
+    "@oxlint/binding-linux-riscv64-musl": ["@oxlint/binding-linux-riscv64-musl@1.83.0", "", { "os": "linux", "cpu": "none" }, "sha512-u1rMymh0W3JZkq370kzQsYPULGWqhE09pZRqnZvUSoYaI9pVO5yVX+iYIslmWuEgwuzH9YAaOsScJiobWCHoOw=="],
+
+    "@oxlint/binding-linux-s390x-gnu": ["@oxlint/binding-linux-s390x-gnu@1.83.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-y0zK3HNwGysu7rqtE+BQG/d0bx5gh/KwlOtghN8oWeK1KcWzeaLqtZrbm8owqdma1lFyrce/hTO5ismuNu+INQ=="],
+
+    "@oxlint/binding-linux-x64-gnu": ["@oxlint/binding-linux-x64-gnu@1.83.0", "", { "os": "linux", "cpu": "x64" }, "sha512-rS5gM0NgD7ngmuJmbIehsidtrOwKkLFwCQbKEeb9KuyQrrWNq5Zkn0uV6AYdXOMJ0grrWEiLwBuvMxt8w5vsNw=="],
+
+    "@oxlint/binding-linux-x64-musl": ["@oxlint/binding-linux-x64-musl@1.83.0", "", { "os": "linux", "cpu": "x64" }, "sha512-W2IH4EtpcPaWcvNGCA95YoDg4vxqE/ZiPCi3arrxEEpsK7+JQN9WYwrlYFx9pcdP6KPXqRqkv3zdQPHcx7b6YQ=="],
+
+    "@oxlint/binding-openharmony-arm64": ["@oxlint/binding-openharmony-arm64@1.83.0", "", { "os": "none", "cpu": "arm64" }, "sha512-6LyKkUyoajssTPLlZmDbZIbu4IZ5B4bGuRUnBgCGpEvHP3FQMaYITncHA/unPUo7q+Z+pIu2HhdkQ+8d1SG7iA=="],
+
+    "@oxlint/binding-win32-arm64-msvc": ["@oxlint/binding-win32-arm64-msvc@1.83.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-Uz/fObEtF0jmNJQJ8CGRBKfefYstS0/wjD3s6IGzP8nUwsJykHQJBiN3npHwKiGRGn/vvBEgNr4B3cCzmmatvg=="],
+
+    "@oxlint/binding-win32-ia32-msvc": ["@oxlint/binding-win32-ia32-msvc@1.83.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-u7XcvPW6Bk58tY5iWs2ESb0vJjoE/kuSpHxopbwp/p3ZtWVQXZ6wor5w3ssVTHOqd/v8b+QdhSFWQ4grEUNWpA=="],
+
+    "@oxlint/binding-win32-x64-msvc": ["@oxlint/binding-win32-x64-msvc@1.83.0", "", { "os": "win32", "cpu": "x64" }, "sha512-LZRubd7ph13QmAg4fFecTYVZkiYbROR2Htaxh/ufWRkDhPOm2wrwaEYR89e0YpPFD3dqBrPoxS7myBw5hmYA7Q=="],
+
     "@popperjs/core": ["@popperjs/core@2.11.8", "", {}, "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="],
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.7", "", {}, "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="],
@@ -271,12 +299,6 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
 
-    "@react-aria/focus": ["@react-aria/focus@3.22.1", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-aria": "^3.48.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-CPxtkyrBi/HYY5P3lE/57sQ6qfa0lN8E55TOm89H0kNGv0lKt+/0zP7lWERzBjRr5IxBVrQX4gFEowBN52LPaA=="],
-
-    "@react-aria/interactions": ["@react-aria/interactions@3.28.1", "", { "dependencies": { "@react-types/shared": "^3.34.0", "@swc/helpers": "^0.5.0", "react-aria": "^3.48.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Bqb+HrD5I5MHS2SKBhISYqo2SW8Y2dfzgF/Y1lIJq7xqLxheo9vzxPGEHhz+XzkgGfoqEJx8A6a3C7uiqS3HWA=="],
-
-    "@react-types/shared": ["@react-types/shared@3.36.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-AzsuD9OfxTOZMMvTRhlN3oHBwOmFN7tDh27LzqmHt4+uOgPhJT7ZM7/kVs/8/o0WxayMUIk3hBmCFRHv1FUoag=="],
-
     "@remix-run/router": ["@remix-run/router@1.23.4", "", {}, "sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q=="],
 
     "@rolldown/binding-android-arm-eabi": ["@rolldown/binding-android-arm-eabi@1.2.8", "", { "os": "android", "cpu": "arm" }, "sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw=="],
@@ -329,8 +351,6 @@
 
     "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
 
-    "@swc/helpers": ["@swc/helpers@0.5.23", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw=="],
-
     "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
@@ -365,10 +385,6 @@
 
     "@tanstack/react-query": ["@tanstack/react-query@5.102.8", "", { "dependencies": { "@tanstack/query-core": "5.102.8" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-TYBea4OuXWD7MhaSHq069TWbFe7rcwWN6kzT7JF0OKi1K6c1gTv2IzD6A6ExJsCMozdkqBWeuIUZmu4KQg0O5A=="],
 
-    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.14.12", "", { "dependencies": { "@tanstack/virtual-core": "3.17.10" }, "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" } }, "sha512-EOJkBss/FRqzFrCpX8M96lIh+ZMc0jPt0LILhxWQ3tOHQ3XdVvuE0jceS2yZXpDtayNfpjeg2EnuYPm90CxIlA=="],
-
-    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.17.10", "", {}, "sha512-eMorKWIi2nekElu+8DgSMJR4iR+sTDeh+W8VjKiMH79yUfEDJ3W9aL/96/wwbxNjyV6EfN39HKszSxjd90zAqQ=="],
-
     "@ts-morph/common": ["@ts-morph/common@0.27.0", "", { "dependencies": { "fast-glob": "^3.3.3", "minimatch": "^10.0.1", "path-browserify": "^1.0.1" } }, "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ=="],
 
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -1025,6 +1041,8 @@
 
     "ora": ["ora@8.2.0", "", { "dependencies": { "chalk": "^5.3.0", "cli-cursor": "^5.0.0", "cli-spinners": "^2.9.2", "is-interactive": "^2.0.0", "is-unicode-supported": "^2.0.0", "log-symbols": "^6.0.0", "stdin-discarder": "^0.2.2", "string-width": "^7.2.0", "strip-ansi": "^7.1.0" } }, "sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw=="],
 
+    "oxlint": ["oxlint@1.83.0", "", { "optionalDependencies": { "@oxlint/binding-android-arm-eabi": "1.83.0", "@oxlint/binding-android-arm64": "1.83.0", "@oxlint/binding-darwin-arm64": "1.83.0", "@oxlint/binding-darwin-x64": "1.83.0", "@oxlint/binding-freebsd-x64": "1.83.0", "@oxlint/binding-linux-arm-gnueabihf": "1.83.0", "@oxlint/binding-linux-arm-musleabihf": "1.83.0", "@oxlint/binding-linux-arm64-gnu": "1.83.0", "@oxlint/binding-linux-arm64-musl": "1.83.0", "@oxlint/binding-linux-ppc64-gnu": "1.83.0", "@oxlint/binding-linux-riscv64-gnu": "1.83.0", "@oxlint/binding-linux-riscv64-musl": "1.83.0", "@oxlint/binding-linux-s390x-gnu": "1.83.0", "@oxlint/binding-linux-x64-gnu": "1.83.0", "@oxlint/binding-linux-x64-musl": "1.83.0", "@oxlint/binding-openharmony-arm64": "1.83.0", "@oxlint/binding-win32-arm64-msvc": "1.83.0", "@oxlint/binding-win32-ia32-msvc": "1.83.0", "@oxlint/binding-win32-x64-msvc": "1.83.0" }, "peerDependencies": { "oxlint-tsgolint": ">=7.0.2001", "vite-plus": "*" }, "optionalPeers": ["oxlint-tsgolint", "vite-plus"], "bin": { "oxlint": "bin/oxlint" } }, "sha512-cyDzSzaw3uzP0TeCeq3lLRPPoaUxkbB4ZOXj+kn+5r+BX9V+4bNVGk9lxer+WrgcpebH4JxLlJ3KQjveVztOLQ=="],
+
     "p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
 
     "p-locate": ["p-locate@3.0.0", "", { "dependencies": { "p-limit": "^2.0.0" } }, "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ=="],
@@ -1091,8 +1109,6 @@
 
     "react": ["react@19.3.0", "", {}, "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog=="],
 
-    "react-aria": ["react-aria@3.52.1", "", { "dependencies": { "@internationalized/date": "^3.12.4", "@internationalized/number": "^3.6.8", "@internationalized/string": "^3.2.10", "@react-types/shared": "^3.36.1", "@swc/helpers": "^0.5.0", "aria-hidden": "^1.2.3", "clsx": "^2.0.0", "react-stately": "3.50.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-fdZZruC9/x/joCg0mhKGs5aHpwrXLCSZ4GOJmhhYyiE0ffyEsk9MLFt9LCOCF9tn8ErTD+UDQP4oDUSlZkmpCg=="],
-
     "react-dom": ["react-dom@19.3.0", "", { "dependencies": { "scheduler": "^0.28.0" }, "peerDependencies": { "react": "^19.3.0" } }, "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q=="],
 
     "react-fast-compare": ["react-fast-compare@3.2.2", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="],
@@ -1111,8 +1127,6 @@
 
     "react-router-dom": ["react-router-dom@6.30.6", "", { "dependencies": { "@remix-run/router": "1.23.4", "react-router": "6.30.6" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-0RHKZz7wwffvkU+2MFVT2NnjK44ssLEV+m0CAJaS2Ksmorrwj7WxH00jO0SOCW26/tINUnJHToXblDs33I38YQ=="],
 
-    "react-stately": ["react-stately@3.50.0", "", { "dependencies": { "@internationalized/date": "^3.12.4", "@internationalized/number": "^3.6.8", "@internationalized/string": "^3.2.10", "@react-types/shared": "^3.36.1", "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-TnckvpDQGU0672wEaLZqdzvhuSeXWjgW6vijMWxiKOxc8CosQUfPGISdcZyfHqjX3XMjEtRxj4w9HumvX4h4mw=="],
-
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
     "react-universal-interface": ["react-universal-interface@0.6.2", "", { "peerDependencies": { "react": "*", "tslib": "*" } }, "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw=="],
@@ -1247,8 +1261,6 @@
 
     "systeminformation": ["systeminformation@5.33.10", "", { "os": "!aix", "bin": { "systeminformation": "lib/cli.js" } }, "sha512-/NXbMVASt2UbSVgmWto4aBTIAeuYY7zOELpZybmNxqpsrbo5uYHpuEPf5nkyrPng0uG5YOb+Yv6s0FyKY4mDQg=="],
 
-    "tabbable": ["tabbable@6.5.0", "", {}, "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA=="],
-
     "tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
 
     "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
diff --git a/web/package.json b/web/package.json
index 006ee20d..9a037bf1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,14 +6,15 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix"
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@bytemd/plugin-gfm": "^1.22.0",
     "@bytemd/react": "^1.22.0",
     "@fontsource-variable/geist": "^5.3.0",
-    "@headlessui/react": "^2.2.10",
     "@heroicons/react": "^2.2.0",
     "@shikijs/core": "^4.4.3",
     "@shikijs/engine-javascript": "^4.4.3",
@@ -56,6 +57,7 @@
     "@types/react-dom": "^19.3.0",
     "autoprefixer": "^10.5.6",
     "esbuild": "^0.28.1",
+    "oxlint": "^1.83.0",
     "postcss": "^8.5.28",
     "postcss-import": "^16.2.0",
     "postcss-nesting": "^13.0.2",
diff --git a/web/src/components/Header/index.tsx b/web/src/components/Header/index.tsx
index ac6b29ad..9734e0d9 100644
--- a/web/src/components/Header/index.tsx
+++ b/web/src/components/Header/index.tsx
@@ -15,7 +15,6 @@
  */
 
 import { ReactNode } from 'react';
-import { Separator } from "@/components/ui/separator";
 
 export default function Header({ title, breadcrumb, props }: { title: ReactNode, breadcrumb?: ReactNode, props?: ReactNode }) {
   return (
diff --git a/web/src/components/Menu/index.tsx b/web/src/components/Menu/index.tsx
index 77b4e84d..34545ab7 100644
--- a/web/src/components/Menu/index.tsx
+++ b/web/src/components/Menu/index.tsx
@@ -38,7 +38,6 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-  useSidebar,
 } from "@/components/ui/sidebar";
 import {
   DropdownMenu,
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index b20959dd..d668c265 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
index 644390de..e68517f0 100644
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -133,7 +133,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      className={cn("w-auto min-w-24 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
       align={align}
       alignOffset={alignOffset}
       side={side}
diff --git a/web/src/components/ui/scroll-area.tsx b/web/src/components/ui/scroll-area.tsx
index 74d916f9..7c13d5e2 100644
--- a/web/src/components/ui/scroll-area.tsx
+++ b/web/src/components/ui/scroll-area.tsx
@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index d807f7a7..33986b9e 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -289,7 +289,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
index bb02d8a1..07315dca 100644
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@@ -16,7 +16,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index fee6b7dc..1ea0d175 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -22,7 +22,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.75 text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -56,7 +56,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
diff --git a/web/src/components/ui/toggle.tsx b/web/src/components/ui/toggle.tsx
index 272c71ab..0fb39644 100644
--- a/web/src/components/ui/toggle.tsx
+++ b/web/src/components/ui/toggle.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
diff --git a/web/src/pages/Builder/RunnerList.tsx b/web/src/pages/Builder/RunnerList.tsx
index 76f7b8b0..3c02fcb2 100644
--- a/web/src/pages/Builder/RunnerList.tsx
+++ b/web/src/pages/Builder/RunnerList.tsx
@@ -16,10 +16,9 @@
 
 import axios from "axios";
 import dayjs from "dayjs";
-import { Dialog, Transition } from "@headlessui/react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import { Fragment, useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog";
+import { useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import { Link, useParams, useSearchParams } from "react-router-dom";
 import { Tooltip } from '../../utils';
@@ -322,171 +321,133 @@ export default function ({ localServer }: { localServer: string }) {
         </div>
       </div >
 
-      <Transition.Root show={createRunnerModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setCreateRunnerModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                  <label htmlFor="tagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
-                    <span className="text-red-600">*</span>Tag
-                  </label>
-                  <div className="relative mt-2 rounded-md shadow-sm">
-                    <input
-                      type="text"
-                      id="tagTemplate"
-                      name="tagTemplate"
-                      placeholder="tag template"
-                      className={(tagTemplateTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                      value={tagTemplateText}
-                      onChange={e => {
-                        setTagTemplateText(e.target.value);
-                      }}
-                    />
-                    {
-                      tagTemplateTextValid ? (
-                        <div></div>
-                      ) : (
-                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                          </svg>
-                        </div>
-                      )
-                    }
-                  </div>
-                  <p className="mt-1 text-xs text-red-600">
-                    {
-                      tagTemplateTextValid ? (
-                        <span></span>
-                      ) : (
-                        <span>
-                          Not a valid tag template, you can try 'main', '&#123;&#123;.ScmRef&#125;&#125;', '&#123;&#123;.ScmBrach&#125;&#125;'.
-                        </span>
-                      )
-                    }
-                  </p>
-                  {
-                    builderObj?.source !== "Dockerfile" ? (
-                      <>
-                        <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900">
-                          <span className="text-red-600">*</span>Branch
-                        </label>
-                        <div className="relative mt-2 rounded-md shadow-sm">
-                          <input
-                            type="text"
-                            name="namespace"
-                            placeholder="1-64 characters"
-                            className={(branchTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={branchText}
-                            onChange={e => {
-                              setBranchText(e.target.value);
-                            }}
-                          />
-                          {
-                            branchTextValid ? (
-                              <div></div>
-                            ) : (
-                              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                </svg>
-                              </div>
-                            )
-                          }
-                        </div>
-                        <p className="mt-1 text-xs text-red-600">
-                          {
-                            branchTextValid ? (
-                              <span></span>
-                            ) : (
-                              <span>
-                                Not a valid branch, you can try 'main', 'master', 'dev'.
-                              </span>
-                            )
-                          }
-                        </p>
-                      </>
-                    ) : null
-                  }
-
-                  <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
-                    Description
-                  </label>
-                  <div className="relative mt-2 rounded-md shadow-sm">
-                    <textarea
-                      name="description"
-                      placeholder="30 characters"
-                      className={(descriptionTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                      value={descriptionText}
-                      onChange={e => setDescriptionText(e.target.value)}
-                    />
-                    {
-                      descriptionTextValid ? (
-                        <div></div>
-                      ) : (
-                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                          </svg>
-                        </div>
-                      )
-                    }
-                  </div>
-                  <p className="mt-1 text-xs text-red-600">
-                    {
-                      descriptionTextValid ? (
-                        <span></span>
-                      ) : (
-                        <span>
-                          Not a valid description, max 50 characters.
-                        </span>
-                      )
-                    }
-                  </p>
-
-                  <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                    <button
-                      type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                      onClick={() => createRunner()}
-                    >
-                      Create
-                    </button>
-                    <button
-                      type="button"
-                      className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                      onClick={() => setCreateRunnerModal(false)}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+      <Dialog open={createRunnerModal} onOpenChange={setCreateRunnerModal}>
+        <DialogContent className="sm:max-w-lg" aria-label="Create runner">
+          <label htmlFor="tagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
+            <span className="text-red-600">*</span>Tag
+          </label>
+          <div className="relative mt-2 rounded-md shadow-sm">
+            <input
+              type="text"
+              id="tagTemplate"
+              name="tagTemplate"
+              placeholder="tag template"
+              className={(tagTemplateTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+              value={tagTemplateText}
+              onChange={e => {
+                setTagTemplateText(e.target.value);
+              }}
+            />
+            {
+              tagTemplateTextValid ? (
+                <div></div>
+              ) : (
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                  </svg>
+                </div>
+              )
+            }
           </div>
-        </Dialog>
-      </Transition.Root>
+          <p className="mt-1 text-xs text-red-600">
+            {
+              tagTemplateTextValid ? (
+                <span></span>
+              ) : (
+                <span>
+                  Not a valid tag template, you can try 'main', '&#123;&#123;.ScmRef&#125;&#125;', '&#123;&#123;.ScmBrach&#125;&#125;'.
+                </span>
+              )
+            }
+          </p>
+          {
+            builderObj?.source !== "Dockerfile" ? (
+              <>
+                <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900">
+                  <span className="text-red-600">*</span>Branch
+                </label>
+                <div className="relative mt-2 rounded-md shadow-sm">
+                  <input
+                    type="text"
+                    name="namespace"
+                    placeholder="1-64 characters"
+                    className={(branchTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                    value={branchText}
+                    onChange={e => {
+                      setBranchText(e.target.value);
+                    }}
+                  />
+                  {
+                    branchTextValid ? (
+                      <div></div>
+                    ) : (
+                      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                    )
+                  }
+                </div>
+                <p className="mt-1 text-xs text-red-600">
+                  {
+                    branchTextValid ? (
+                      <span></span>
+                    ) : (
+                      <span>
+                        Not a valid branch, you can try 'main', 'master', 'dev'.
+                      </span>
+                    )
+                  }
+                </p>
+              </>
+            ) : null
+          }
+
+          <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
+            Description
+          </label>
+          <div className="relative mt-2 rounded-md shadow-sm">
+            <textarea
+              name="description"
+              placeholder="30 characters"
+              className={(descriptionTextValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+              value={descriptionText}
+              onChange={e => setDescriptionText(e.target.value)}
+            />
+            {
+              descriptionTextValid ? (
+                <div></div>
+              ) : (
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                  </svg>
+                </div>
+              )
+            }
+          </div>
+          <p className="mt-1 text-xs text-red-600">
+            {
+              descriptionTextValid ? (
+                <span></span>
+              ) : (
+                <span>
+                  Not a valid description, max 50 characters.
+                </span>
+              )
+            }
+          </p>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateRunnerModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => createRunner()}>Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
     </>
   )
diff --git a/web/src/pages/Builder/Setup.tsx b/web/src/pages/Builder/Setup.tsx
index 1d0630f5..20e5d957 100644
--- a/web/src/pages/Builder/Setup.tsx
+++ b/web/src/pages/Builder/Setup.tsx
@@ -16,12 +16,35 @@
 
 import _ from 'lodash';
 import axios from "axios";
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
-import { Combobox, Listbox, Transition } from '@headlessui/react';
+import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { Fragment, useEffect, useState } from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 import Header from '../../components/Header';
 import HeaderMenu from '../../components/Menu';
 import ShikiDockerfileEditor from '../../components/CodeEditor/ShikiDockerfileEditor';
@@ -581,7 +604,7 @@ export default function ({ localServer }: { localServer: string }) {
           <title>{t("header.setupBuilder")}</title>
         </Helmet>
       </HelmetProvider>
-      <div className="min-h-screen flex overflow-hidden bg-white dark:bg-gray-950 min-w-[1600px]">
+      <div className="min-h-screen flex overflow-hidden bg-white dark:bg-gray-950 min-w-400">
         <HeaderMenu localServer={localServer} item="coderepos" />
         <div className="flex flex-col flex-1 max-h-screen">
           {/* part 1 begin */}
@@ -600,87 +623,53 @@ export default function ({ localServer }: { localServer: string }) {
                     Namespace
                   </label>
                   <div className="mt-2">
-                    <Combobox value={namespaceSelected}
-                      disabled={(searchParams.get('namespace_stick') || '') === 'true'}
-                      onChange={(namespace: INamespaceItem | null) => {
-                        if (!namespace) {
-                          return;
+                    <Popover>
+                      <PopoverTrigger
+                        render={
+                          <Button variant="outline" className="w-full justify-between font-normal" disabled={(searchParams.get('namespace_stick') || '') === 'true'}>
+                            {namespaceSelected?.name || "Select"}
+                            <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                          </Button>
                         }
-                        setSearchParams({
-                          ...Object.fromEntries(searchParams.entries()),
-                          namespace: namespace.name,
-                          namespace_id: namespace.id.toString(),
-                          repository: '',
-                          repository_id: '',
-                        });
-                        setRepositorySelected({} as IRepositoryItem); // clear the repo selected
-                        setNamespaceSelected(namespace);
-                      }}>
-                      <div className="relative mt-1">
-                        <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                          <Combobox.Input
-                            id="namespace"
-                            className={() => {
-                              let cursor = ''
-                              if ((searchParams.get('namespace_stick') || '') === 'true') {
-                                cursor = 'cursor-not-allowed ';
-                              }
-                              return cursor + "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                            }}
-                            displayValue={(namespace: INamespaceItem) => namespace.name}
-                            onChange={event => {
-                              setNamespaceSearch(event.target.value);
-                            }}
+                      />
+                      <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                        <Command shouldFilter={false}>
+                          <CommandInput
+                            placeholder="Search"
+                            value={namespaceSearch}
+                            onValueChange={setNamespaceSearch}
                           />
-                          <Combobox.Button
-                            className={() => {
-                              let cursor = ''
-                              if ((searchParams.get('namespace_stick') || '') === 'true') {
-                                cursor = 'cursor-not-allowed ';
-                              }
-                              return cursor + "absolute inset-y-0 right-0 flex items-center pr-2"
-                            }}
-                          >
-                            <ChevronUpDownIcon
-                              className="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </Combobox.Button>
-                        </div>
-                        <Transition
-                          as={Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                          afterLeave={() => setNamespaceSearch('')}
-                        >
-                          <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                            {
-                              namespaceList?.length === 0 ? (
-                                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                  Nothing found.
-                                </div>
-                              ) : (
-                                namespaceList?.map(namespace => (
-                                  <Combobox.Option
-                                    key={namespace.id}
-                                    className={({ active }) =>
-                                      `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                      }`
+                          <CommandList>
+                            <CommandEmpty>Nothing found.</CommandEmpty>
+                            <CommandGroup>
+                              {namespaceList?.map(item => (
+                                <CommandItem
+                                  key={item.id}
+                                  value={item.name}
+                                  onSelect={() => {
+                                    const namespace = item;
+                                    if (!namespace) {
+                                    return;
                                     }
-                                    value={namespace}
-                                  >
-                                    <span className={`block truncate  font-normal`}>
-                                      {namespace.name}
-                                    </span>
-                                  </Combobox.Option>
-                                ))
-                              )
-                            }
-                          </Combobox.Options>
-                        </Transition>
-                      </div>
-                    </Combobox>
+                                    setSearchParams({
+                                    ...Object.fromEntries(searchParams.entries()),
+                                    namespace: namespace.name,
+                                    namespace_id: namespace.id.toString(),
+                                    repository: '',
+                                    repository_id: '',
+                                    });
+                                    setRepositorySelected({} as IRepositoryItem); // clear the repo selected
+                                    setNamespaceSelected(namespace);
+                                  }}
+                                >
+                                  {item.name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
                 <div className="sm:col-span-1">
@@ -688,89 +677,50 @@ export default function ({ localServer }: { localServer: string }) {
                     Repository
                   </label>
                   <div className="mt-2">
-                    <Combobox value={repositorySelected}
-                      disabled={(searchParams.get('repository_stick') || '') === 'true'}
-                      onChange={(repo: IRepositoryItem | null) => {
-                        if (!repo) {
-                          return;
+                    <Popover>
+                      <PopoverTrigger
+                        render={
+                          <Button variant="outline" className="w-full justify-between font-normal" disabled={(searchParams.get('repository_stick') || '') === 'true'}>
+                            {repositorySelected?.name || "Select"}
+                            <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                          </Button>
                         }
-                        setSearchParams({
-                          ...Object.fromEntries(searchParams.entries()),
-                          repository: repo.name,
-                          repository_id: repo.id.toString(),
-                        });
-                        setRepositorySelected(repo);
-                      }}>
-                      <div className="relative mt-1">
-                        <div className="w-full relative overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm cursor-pointer" >
-                          <Combobox.Input
-                            id="repository"
-                            className={() => {
-                              let cursor = ''
-                              if ((searchParams.get('repository_stick') || '') === 'true') {
-                                cursor = 'cursor-not-allowed ';
-                              }
-                              return cursor + "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                            }}
-                            displayValue={(repository: IRepositoryItem) => {
-                              if (namespaceSelected.name != undefined && repository.name != undefined) {
-                                return repository.name.substring(namespaceSelected.name.length + 1)
-                              }
-                              return "";
-                            }}
-                            onChange={(event) => {
-                              setRepositorySearch(event.target.value);
-                            }}
+                      />
+                      <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                        <Command shouldFilter={false}>
+                          <CommandInput
+                            placeholder="Search"
+                            value={repositorySearch}
+                            onValueChange={setRepositorySearch}
                           />
-                          <Combobox.Button
-                            className={() => {
-                              let cursor = ''
-                              if ((searchParams.get('repository_stick') || '') === 'true') {
-                                cursor = 'cursor-not-allowed ';
-                              }
-                              return cursor + "absolute inset-y-0 right-0 flex items-center pr-2"
-                            }}
-                          >
-                            <ChevronUpDownIcon
-                              className="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </Combobox.Button>
-                        </div>
-                        <Transition
-                          as={Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0"
-                          afterLeave={() => setRepositorySearch('')}
-                        >
-                          <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                            {
-                              repositoryList?.length === 0 ? (
-                                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                  Nothing found.
-                                </div>
-                              ) : (
-                                repositoryList?.map(repository => (
-                                  <Combobox.Option
-                                    key={repository.id}
-                                    className={({ active }) =>
-                                      `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                      }`
+                          <CommandList>
+                            <CommandEmpty>Nothing found.</CommandEmpty>
+                            <CommandGroup>
+                              {repositoryList?.map(item => (
+                                <CommandItem
+                                  key={item.id}
+                                  value={item.name}
+                                  onSelect={() => {
+                                    const repo = item;
+                                    if (!repo) {
+                                    return;
                                     }
-                                    value={repository}
-                                  >
-                                    <span className={`block truncate font-normal`}>
-                                      {repository.name.substring(namespaceSelected.name.length + 1)}
-                                    </span>
-                                  </Combobox.Option>
-                                ))
-                              )
-                            }
-                          </Combobox.Options>
-                        </Transition>
-                      </div>
-                    </Combobox>
+                                    setSearchParams({
+                                    ...Object.fromEntries(searchParams.entries()),
+                                    repository: repo.name,
+                                    repository_id: repo.id.toString(),
+                                    });
+                                    setRepositorySelected(repo);
+                                  }}
+                                >
+                                  {item.name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
               </div>
@@ -783,73 +733,32 @@ export default function ({ localServer }: { localServer: string }) {
                   <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                     Builder Source
                   </label>
-                  <div className="mt-2 flex flex-row items-center h-[36px]">
-                    <Listbox
-                      disabled={(searchParams.get('code_repository_stick') || '') === 'true'}
+                  <div className="mt-2 flex flex-row items-center h-9">
+                    <Select
                       value={builderSource}
-                      onChange={(source: string) => {
+                      onValueChange={(value) => {
+                        if (value == null) {
+                          return;
+                        }
+                        const source = value;
                         setSearchParams({
-                          ...Object.fromEntries(searchParams.entries()),
-                          builder_source: source,
+                        ...Object.fromEntries(searchParams.entries()),
+                        builder_source: source,
                         });
                         setBuilderSource(source);
-                      }}>
-                      <div className="relative mt-1 w-full">
-                        <Listbox.Button
-                          className={() => {
-                            let cursor = ''
-                            if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                              cursor = 'cursor-not-allowed ';
-                            } else {
-                              cursor = 'cursor-pointer ';
-                            }
-                            return cursor + "relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-                          }}
-                        >
-                          <span className="block truncate">{builderSource}</span>
-                          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                            <ChevronUpDownIcon
-                              className="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </span>
-                        </Listbox.Button>
-                        <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                          <Transition
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                          >
-                            {
-                              supportBuilderSource.map(source => (
-                                <Listbox.Option key={source.name} value={source.name} className={({ active }) =>
-                                  `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                  }`
-                                }>
-                                  {({ selected }) => (
-                                    <>
-                                      <span
-                                        className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                          }`}
-                                      >
-                                        {source.name}
-                                      </span>
-                                      {
-                                        selected ? (
-                                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                          </span>
-                                        ) : null
-                                      }
-                                    </>
-                                  )}
-                                </Listbox.Option>
-                              ))
-                            }
-                          </Transition>
-                        </Listbox.Options>
-                      </div>
-                    </Listbox>
+                      }}
+                    >
+                      <SelectTrigger className="w-full" disabled={(searchParams.get('code_repository_stick') || '') === 'true'}>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {supportBuilderSource.map(source => (
+                          <SelectItem key={source.name} value={source.name}>
+                            {source.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
               </div>
@@ -863,86 +772,49 @@ export default function ({ localServer }: { localServer: string }) {
                             Provider
                           </label>
                           <div className="mt-2">
-                            <Combobox
-                              disabled={(searchParams.get('code_repository_stick') || '') === 'true'}
-                              value={codeRepositoryProviderSelected}
-                              onChange={(provider: ICodeRepositoryProviderItem | null) => {
-                                if (!provider) {
-                                  return;
+                            <Popover>
+                              <PopoverTrigger
+                                render={
+                                  <Button variant="outline" className="w-full justify-between font-normal" disabled={(searchParams.get('code_repository_stick') || '') === 'true'}>
+                                    {codeRepositoryProviderSelected?.provider || "Select"}
+                                    <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                                  </Button>
                                 }
-                                setSearchParams({
-                                  ...Object.fromEntries(searchParams.entries()),
-                                  provider: provider.provider,
-                                });
-                                setCodeRepositoryOwnerSelected({} as ICodeRepositoryOwnerItem); // clear the selected
-                                setCodeRepositorySelected({} as ICodeRepositoryItem);
-                                setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
-                                setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCronBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCodeRepositoryProviderSelected(provider);
-                              }}>
-                              <div className="relative mt-1">
-                                <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                  <Combobox.Input
-                                    id="codeProviders"
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    }}
-                                    displayValue={(provider: ICodeRepositoryProviderItem) => provider.provider}
-                                    onChange={(event) => { }}
-                                  />
-                                  <Combobox.Button
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "absolute inset-y-0 right-0 flex items-center pr-2"
-                                    }}
-                                  >
-                                    <ChevronUpDownIcon
-                                      className="h-5 w-5 text-gray-400"
-                                      aria-hidden="true"
-                                    />
-                                  </Combobox.Button>
-                                </div>
-                                <Transition
-                                  as={Fragment}
-                                  leave="transition ease-in duration-100"
-                                  leaveFrom="opacity-100"
-                                  leaveTo="opacity-0"
-                                >
-                                  <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                    {
-                                      codeRepositoryProviderList?.length === 0 ? (
-                                        <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                          Nothing found.
-                                        </div>
-                                      ) : (
-                                        codeRepositoryProviderList?.map(provider => (
-                                          <Combobox.Option
-                                            key={provider.provider}
-                                            className={({ active }) =>
-                                              `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                              }`
+                              />
+                              <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                                <Command shouldFilter={false}>
+                                  <CommandList>
+                                    <CommandEmpty>Nothing found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {codeRepositoryProviderList?.map(item => (
+                                        <CommandItem
+                                          key={item.provider}
+                                          value={item.provider}
+                                          onSelect={() => {
+                                            const provider = item;
+                                            if (!provider) {
+                                            return;
                                             }
-                                            value={provider}
-                                          >
-                                            <span className={`block truncate font-normal`}>
-                                              {provider.provider}
-                                            </span>
-                                          </Combobox.Option>
-                                        ))
-                                      )
-                                    }
-                                  </Combobox.Options>
-                                </Transition>
-                              </div>
-                            </Combobox>
+                                            setSearchParams({
+                                            ...Object.fromEntries(searchParams.entries()),
+                                            provider: provider.provider,
+                                            });
+                                            setCodeRepositoryOwnerSelected({} as ICodeRepositoryOwnerItem); // clear the selected
+                                            setCodeRepositorySelected({} as ICodeRepositoryItem);
+                                            setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCronBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCodeRepositoryProviderSelected(provider);
+                                          }}
+                                        >
+                                          {item.provider}
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </div>
                       ) : null
@@ -954,89 +826,54 @@ export default function ({ localServer }: { localServer: string }) {
                             Organization
                           </label>
                           <div className="mt-2">
-                            <Combobox
-                              disabled={(searchParams.get('code_repository_stick') || '') === 'true'}
-                              value={codeRepositoryOwnerSelected}
-                              onChange={(owner: ICodeRepositoryOwnerItem | null) => {
-                                if (!owner) {
-                                  return;
+                            <Popover>
+                              <PopoverTrigger
+                                render={
+                                  <Button variant="outline" className="w-full justify-between font-normal" disabled={(searchParams.get('code_repository_stick') || '') === 'true'}>
+                                    {codeRepositoryOwnerSelected?.owner || "Select"}
+                                    <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                                  </Button>
                                 }
-                                setSearchParams({
-                                  ...Object.fromEntries(searchParams.entries()),
-                                  code_repository_owner: owner.owner,
-                                  code_repository_owner_id: owner.id.toString(),
-                                });
-                                setCodeRepositorySelected({} as ICodeRepositoryItem);
-                                setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
-                                setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCronBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCodeRepositoryOwnerSelected(owner);
-                              }}>
-                              <div className="relative mt-1">
-                                <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                  <Combobox.Input
-                                    id="codeOwners"
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    }}
-                                    displayValue={(owner: ICodeRepositoryOwnerItem) => owner.owner}
-                                    onChange={(event) => {
-                                      setCodeRepositoryOwnerSearch(event.target.value);
-                                    }}
+                              />
+                              <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                                <Command shouldFilter={false}>
+                                  <CommandInput
+                                    placeholder="Search"
+                                    value={codeRepositoryOwnerSearch}
+                                    onValueChange={setCodeRepositoryOwnerSearch}
                                   />
-                                  <Combobox.Button
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "absolute inset-y-0 right-0 flex items-center pr-2"
-                                    }}
-                                  >
-                                    <ChevronUpDownIcon
-                                      className="h-5 w-5 text-gray-400"
-                                      aria-hidden="true"
-                                    />
-                                  </Combobox.Button>
-                                </div>
-                                <Transition
-                                  as={Fragment}
-                                  leave="transition ease-in duration-100"
-                                  leaveFrom="opacity-100"
-                                  leaveTo="opacity-0"
-                                  afterLeave={() => setCodeRepositoryOwnerSearch('')}
-                                >
-                                  <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                    {
-                                      codeRepositoryOwnerFilteredList?.length === 0 ? (
-                                        <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                          Nothing found.
-                                        </div>
-                                      ) : (
-                                        codeRepositoryOwnerFilteredList?.map(owner => (
-                                          <Combobox.Option
-                                            key={owner.id}
-                                            className={({ active }) =>
-                                              `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                              }`
+                                  <CommandList>
+                                    <CommandEmpty>Nothing found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {codeRepositoryOwnerFilteredList?.map(item => (
+                                        <CommandItem
+                                          key={item.id}
+                                          value={item.owner}
+                                          onSelect={() => {
+                                            const owner = item;
+                                            if (!owner) {
+                                            return;
                                             }
-                                            value={owner}
-                                          >
-                                            <span className={`block truncate  font-normal`}>
-                                              {owner.owner}
-                                            </span>
-                                          </Combobox.Option>
-                                        ))
-                                      )
-                                    }
-                                  </Combobox.Options>
-                                </Transition>
-                              </div>
-                            </Combobox>
+                                            setSearchParams({
+                                            ...Object.fromEntries(searchParams.entries()),
+                                            code_repository_owner: owner.owner,
+                                            code_repository_owner_id: owner.id.toString(),
+                                            });
+                                            setCodeRepositorySelected({} as ICodeRepositoryItem);
+                                            setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCronBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCodeRepositoryOwnerSelected(owner);
+                                          }}
+                                        >
+                                          {item.owner}
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </div>
                       ) : null
@@ -1048,89 +885,53 @@ export default function ({ localServer }: { localServer: string }) {
                             Repository
                           </label>
                           <div className="mt-2">
-                            <Combobox
-                              disabled={(searchParams.get('code_repository_stick') || '') === 'true'}
-                              value={codeRepositorySelected}
-                              onChange={(cr: ICodeRepositoryItem | null) => {
-                                if (!cr) {
-                                  return;
+                            <Popover>
+                              <PopoverTrigger
+                                render={
+                                  <Button variant="outline" className="w-full justify-between font-normal" disabled={(searchParams.get('code_repository_stick') || '') === 'true'}>
+                                    {codeRepositorySelected?.name || "Select"}
+                                    <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                                  </Button>
                                 }
-                                setSearchParams({
-                                  ...Object.fromEntries(searchParams.entries()),
-                                  code_repository_name: cr.name,
-                                  code_repository_id: cr.id.toString(),
-                                });
-                                setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
-                                setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCronBranchSelected({} as ICodeRepositoryBranchItem);
-                                setCodeRepositorySelected(cr);
-                              }}>
-                              <div className="relative mt-1">
-                                <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                  <Combobox.Input
-                                    id="coderepos"
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    }}
-                                    // className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    displayValue={(cr: ICodeRepositoryItem) => cr.name}
-                                    onChange={(event) => {
-                                      setCodeRepositorySearch(event.target.value);
-                                    }}
+                              />
+                              <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                                <Command shouldFilter={false}>
+                                  <CommandInput
+                                    placeholder="Search"
+                                    value={codeRepositorySearch}
+                                    onValueChange={setCodeRepositorySearch}
                                   />
-                                  <Combobox.Button
-                                    className={() => {
-                                      let cursor = ''
-                                      if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                        cursor = 'cursor-not-allowed ';
-                                      }
-                                      return cursor + "absolute inset-y-0 right-0 flex items-center pr-2"
-                                    }}
-                                  >
-                                    <ChevronUpDownIcon
-                                      className="h-5 w-5 text-gray-400"
-                                      aria-hidden="true"
-                                    />
-                                  </Combobox.Button>
-                                </div>
-                                <Transition
-                                  as={Fragment}
-                                  leave="transition ease-in duration-100"
-                                  leaveFrom="opacity-100"
-                                  leaveTo="opacity-0"
-                                  afterLeave={() => setCodeRepositorySearch('')}
-                                >
-                                  <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                    {
-                                      codeRepositoryList?.length === 0 ? (
-                                        <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                          Nothing found.
-                                        </div>
-                                      ) : (
-                                        codeRepositoryList?.map(cr => (
-                                          <Combobox.Option
-                                            key={cr.id}
-                                            className={({ active }) =>
-                                              `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                              }`
+                                  <CommandList>
+                                    <CommandEmpty>Nothing found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {codeRepositoryList?.map(item => (
+                                        <CommandItem
+                                          key={item.id}
+                                          value={item.name}
+                                          onSelect={() => {
+                                            const cr = item;
+                                            if (!cr) {
+                                            return;
                                             }
-                                            value={cr}
-                                          >
-                                            <span className={`block truncate  font-normal`}>
-                                              {cr.name} <span className='text-gray-400'>{cr.clone_url}</span>
-                                            </span>
-                                          </Combobox.Option>
-                                        ))
-                                      )
-                                    }
-                                  </Combobox.Options>
-                                </Transition>
-                              </div>
-                            </Combobox>
+                                            setSearchParams({
+                                            ...Object.fromEntries(searchParams.entries()),
+                                            code_repository_name: cr.name,
+                                            code_repository_id: cr.id.toString(),
+                                            });
+                                            setCodeRepositoryBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setMergeEventBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCronBranchSelected({} as ICodeRepositoryBranchItem);
+                                            setCodeRepositorySelected(cr);
+                                          }}
+                                        >
+                                          {item.name}
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </div>
                       ) : null
@@ -1142,68 +943,50 @@ export default function ({ localServer }: { localServer: string }) {
                             Branch
                           </label>
                           <div className="mt-2">
-                            <Combobox value={codeRepositoryBranchSelected} onChange={(branch: ICodeRepositoryBranchItem | null) => {
-                              if (!branch) {
-                                return;
-                              }
-                              setSearchParams({
-                                ...Object.fromEntries(searchParams.entries()),
-                                code_repository_branch_name: branch.name,
-                                code_repository_branch_id: branch.id.toString(),
-                              });
-                              setCodeRepositoryBranchSelected(branch);
-                            }}>
-                              <div className="relative mt-1">
-                                <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                  <Combobox.Input
-                                    id="branch"
-                                    className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    displayValue={(branch: ICodeRepositoryBranchItem) => branch.name}
-                                    onChange={(event) => {
-                                      setCodeRepositoryBranchSearch(event.target.value);
-                                    }}
+                            <Popover>
+                              <PopoverTrigger
+                                render={
+                                  <Button variant="outline" className="w-full justify-between font-normal">
+                                    {codeRepositoryBranchSelected?.name || "Select"}
+                                    <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                                  </Button>
+                                }
+                              />
+                              <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                                <Command shouldFilter={false}>
+                                  <CommandInput
+                                    placeholder="Search"
+                                    value={codeRepositoryBranchSearch}
+                                    onValueChange={setCodeRepositoryBranchSearch}
                                   />
-                                  <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <ChevronUpDownIcon
-                                      className="h-5 w-5 text-gray-400"
-                                      aria-hidden="true"
-                                    />
-                                  </Combobox.Button>
-                                </div>
-                                <Transition
-                                  as={Fragment}
-                                  leave="transition ease-in duration-100"
-                                  leaveFrom="opacity-100"
-                                  leaveTo="opacity-0"
-                                  afterLeave={() => setCodeRepositoryBranchSearch('')}
-                                >
-                                  <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                    {
-                                      codeRepositoryBranchFilteredList?.length === 0 ? (
-                                        <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                          Nothing found.
-                                        </div>
-                                      ) : (
-                                        codeRepositoryBranchFilteredList?.map(branch => (
-                                          <Combobox.Option
-                                            key={branch.id}
-                                            className={({ active }) =>
-                                              `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                              }`
+                                  <CommandList>
+                                    <CommandEmpty>Nothing found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {codeRepositoryBranchFilteredList?.map(item => (
+                                        <CommandItem
+                                          key={item.id}
+                                          value={item.name}
+                                          onSelect={() => {
+                                            const branch = item;
+                                            if (!branch) {
+                                            return;
                                             }
-                                            value={branch}
-                                          >
-                                            <span className={`block truncate  font-normal`}>
-                                              {branch.name}
-                                            </span>
-                                          </Combobox.Option>
-                                        ))
-                                      )
-                                    }
-                                  </Combobox.Options>
-                                </Transition>
-                              </div>
-                            </Combobox>
+                                            setSearchParams({
+                                            ...Object.fromEntries(searchParams.entries()),
+                                            code_repository_branch_name: branch.name,
+                                            code_repository_branch_id: branch.id.toString(),
+                                            });
+                                            setCodeRepositoryBranchSelected(branch);
+                                          }}
+                                        >
+                                          {item.name}
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </div>
                       ) : null
@@ -1214,7 +997,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="customRepositoryCloneUrl" className="block text-sm font-medium leading-6 text-gray-900">
                             Repository
                           </label>
-                          <div className="mt-2 flex flex-row items-center h-[36px]">
+                          <div className="mt-2 flex flex-row items-center h-9">
                             <input
                               type="text"
                               name="customRepositoryCloneUrl"
@@ -1239,7 +1022,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="customRepositoryBranch" className="block text-sm font-medium leading-6 text-gray-900">
                             Branch
                           </label>
-                          <div className="mt-2 flex flex-row items-center h-[36px]">
+                          <div className="mt-2 flex flex-row items-center h-9">
                             <input
                               type="text"
                               name="customRepositoryBranch"
@@ -1268,60 +1051,32 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                         Credential
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
-                        <Listbox value={customRepositoryCredential} onChange={(cred: string) => {
-                          setSearchParams({
+                      <div className="mt-2 flex flex-row items-center h-9">
+                        <Select
+                          value={customRepositoryCredential}
+                          onValueChange={(value) => {
+                            if (value == null) {
+                              return;
+                            }
+                            const cred = value;
+                            setSearchParams({
                             ...Object.fromEntries(searchParams.entries()),
                             custom_repository_credential: cred,
-                          });
-                          setCustomRepositoryCredential(cred);
-                        }}>
-                          <div className="relative mt-1 w-full">
-                            <Listbox.Button className="relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm cursor-pointer">
-                              <span className="block truncate">{customRepositoryCredential}</span>
-                              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                <ChevronUpDownIcon
-                                  className="h-5 w-5 text-gray-400"
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            </Listbox.Button>
-                            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                              <Transition
-                                leave="transition ease-in duration-100"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                              >
-                                {
-                                  supportCredential.map((credential) => (
-                                    <Listbox.Option key={credential.id} value={credential.name} className={({ active }) =>
-                                      `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                      }`
-                                    }>
-                                      {({ selected }) => (
-                                        <>
-                                          <span
-                                            className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                              }`}
-                                          >
-                                            {credential.name}
-                                          </span>
-                                          {
-                                            selected ? (
-                                              <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                              </span>
-                                            ) : null
-                                          }
-                                        </>
-                                      )}
-                                    </Listbox.Option>
-                                  ))
-                                }
-                              </Transition>
-                            </Listbox.Options>
-                          </div>
-                        </Listbox>
+                            });
+                            setCustomRepositoryCredential(cred);
+                          }}
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {supportCredential.map(credential => (
+                              <SelectItem key={credential.name} value={credential.name}>
+                                {credential.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
                     </div>
 
@@ -1331,7 +1086,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor='customRepositoryUsername' className='block text-sm font-medium leading-6 text-gray-900'>
                             Username
                           </label>
-                          <div className='mt-2 h-[36px]'>
+                          <div className='mt-2 h-9'>
                             <input
                               type='text'
                               name='customRepositoryUsername'
@@ -1356,7 +1111,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="customRepositoryPassword" className="block text-sm font-medium leading-6 text-gray-900">
                             Password
                           </label>
-                          <div className='mt-2 h-[36px]'>
+                          <div className='mt-2 h-9'>
                             <input
                               type='password'
                               autoComplete='new-password'
@@ -1377,7 +1132,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor='customRepositoryToken' className="block text-sm font-medium leading-6 text-gray-900">
                             Token
                           </label>
-                          <div className='mt-2 h-[36px]'>
+                          <div className='mt-2 h-9'>
                             <input
                               type="text"
                               name="customRepositoryToken"
@@ -1397,7 +1152,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="customRepositorySshKey" className="block text-sm font-medium leading-6 text-gray-900">
                             SSH Key
                           </label>
-                          <div className='mt-2 h-[36px]'>
+                          <div className='mt-2 h-9'>
                             <input
                               type="text"
                               name="customRepositorySshKey"
@@ -1420,7 +1175,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label className="block text-sm font-medium leading-6 text-gray-900">
                         Clone Submodule
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <label className="relative inline-flex items-center cursor-pointer">
                           <input type="checkbox" checked={submodule} className="sr-only peer" onChange={e => {
                             setSearchParams({
@@ -1429,7 +1184,7 @@ export default function ({ localServer }: { localServer: string }) {
                             });
                             setSubmodule(e.target.checked);
                           }} />
-                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                         </label>
                       </div>
                     </div>
@@ -1437,7 +1192,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="depth" className="block text-sm font-medium leading-6 text-gray-900">
                         Clone Depth
                       </label>
-                      <div className="mt-2 h-[36px]">
+                      <div className="mt-2 h-9">
                         <input
                           type="number"
                           name="depth"
@@ -1487,7 +1242,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="dockerfileContext" className="block text-sm font-medium leading-6 text-gray-900">
                         Context
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <input
                           type="text"
                           name="dockerfileContext"
@@ -1512,7 +1267,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="dockerfilePath" className="block text-sm font-medium leading-6 text-gray-900">
                         Dockerfile Path
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <input
                           type="text"
                           name="dockerfilePath"
@@ -1535,66 +1290,45 @@ export default function ({ localServer }: { localServer: string }) {
                   <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                     Platforms
                   </label>
-                  <div className="mt-2 flex flex-row items-center h-[36px]">
-                    <Listbox value={selectedPlatforms} onChange={platforms => {
-                      let ps = "";
-                      for (let i = 0; i < platforms.length; i++) {
-                        if (i == 0) {
-                          ps += platforms[i].name;
-                        } else {
-                          ps += `,${platforms[i].name}`
+                  <div className="mt-2 flex flex-row items-center h-9">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger
+                        render={
+                          <Button variant="outline" className="w-full justify-between font-normal">
+                            {selectedPlatforms.map((platform) => platform.name).join(', ') || "Select"}
+                            <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                          </Button>
                         }
-                      }
-                      setSearchParams({
-                        ...Object.fromEntries(searchParams.entries()),
-                        platforms: ps,
-                      });
-                      setSelectedPlatforms(platforms);
-                    }} multiple>
-                      <div className="relative mt-1 w-full">
-                        <Listbox.Button className="relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm cursor-pointer">
-                          <span className="block truncate">{selectedPlatforms.map((platform) => platform.name).join(', ')}</span>
-                          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                            <ChevronUpDownIcon
-                              className="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </span>
-                        </Listbox.Button>
-                        <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                          <Transition
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
+                      />
+                      <DropdownMenuContent align="start" className="w-(--anchor-width)">
+                        {supportPlatforms.map(item => (
+                          <DropdownMenuCheckboxItem
+                            key={item.name}
+                            checked={selectedPlatforms.some(selected => selected.name === item.name)}
+                            onCheckedChange={(checked) => {
+                              const platforms = checked
+                                ? [...selectedPlatforms, item]
+                                : selectedPlatforms.filter(selected => selected.name !== item.name);
+                              let ps = "";
+                              for (let i = 0; i < platforms.length; i++) {
+                              if (i == 0) {
+                              ps += platforms[i].name;
+                              } else {
+                              ps += `,${platforms[i].name}`
+                              }
+                              }
+                              setSearchParams({
+                              ...Object.fromEntries(searchParams.entries()),
+                              platforms: ps,
+                              });
+                              setSelectedPlatforms(platforms);
+                            }}
                           >
-                            {
-                              supportPlatforms.map((platform) => (
-                                <Listbox.Option key={platform.name} value={platform} className={({ active }) =>
-                                  `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                  }`
-                                }>
-                                  {({ selected }) => (
-                                    <>
-                                      <span
-                                        className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                          }`}
-                                      >
-                                        {platform.name}
-                                      </span>
-                                      {selected ? (
-                                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                        </span>
-                                      ) : null}
-                                    </>
-                                  )}
-                                </Listbox.Option>
-                              ))
-                            }
-                          </Transition>
-                        </Listbox.Options>
-                      </div>
-                    </Listbox>
+                            {item.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </div>
                 </div>
               </div>
@@ -1607,7 +1341,7 @@ export default function ({ localServer }: { localServer: string }) {
                   <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                     Enabled
                   </label>
-                  <div className="mt-2 flex flex-row items-center h-[36px]">
+                  <div className="mt-2 flex flex-row items-center h-9">
                     <label className="relative inline-flex items-center cursor-pointer">
                       <input type="checkbox" checked={cronBuild} className="sr-only peer" onChange={e => {
                         setSearchParams({
@@ -1616,7 +1350,7 @@ export default function ({ localServer }: { localServer: string }) {
                         });
                         setCronBuild(e.target.checked);
                       }} />
-                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                     </label>
                   </div>
                 </div>
@@ -1626,7 +1360,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="mergeEventBranch" className="block text-sm font-medium leading-6 text-gray-900">
                         Expression
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <input
                           type="text"
                           name="mergeEventBranch"
@@ -1652,68 +1386,50 @@ export default function ({ localServer }: { localServer: string }) {
                         Branch
                       </label>
                       <div className="mt-2">
-                        <Combobox value={cronBranchSelected} onChange={(branch: ICodeRepositoryBranchItem | null) => {
-                          if (!branch) {
-                            return;
-                          }
-                          setSearchParams({
-                            ...Object.fromEntries(searchParams.entries()),
-                            cron_branch_name: branch.name,
-                            cron_branch_id: branch.id.toString(),
-                          });
-                          setCronBranchSelected(branch);
-                        }}>
-                          <div className="relative mt-1">
-                            <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                              <Combobox.Input
-                                id="cronBranch"
-                                className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                displayValue={(branch: ICodeRepositoryBranchItem) => branch.name}
-                                onChange={e => {
-                                  setCronBranchSearch(e.target.value);
-                                }}
+                        <Popover>
+                          <PopoverTrigger
+                            render={
+                              <Button variant="outline" className="w-full justify-between font-normal">
+                                {cronBranchSelected?.name || "Select"}
+                                <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                              </Button>
+                            }
+                          />
+                          <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder="Search"
+                                value={cronBranchSearch}
+                                onValueChange={setCronBranchSearch}
                               />
-                              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                                <ChevronUpDownIcon
-                                  className="h-5 w-5 text-gray-400"
-                                  aria-hidden="true"
-                                />
-                              </Combobox.Button>
-                            </div>
-                            <Transition
-                              as={Fragment}
-                              leave="transition ease-in duration-100"
-                              leaveFrom="opacity-100"
-                              leaveTo="opacity-0"
-                              afterLeave={() => setCronBranchSearch('')}
-                            >
-                              <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                {
-                                  cronBranchFilteredList?.length === 0 ? (
-                                    <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                      Nothing found.
-                                    </div>
-                                  ) : (
-                                    cronBranchFilteredList?.map(branch => (
-                                      <Combobox.Option
-                                        key={branch.id}
-                                        className={({ active }) =>
-                                          `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                          }`
+                              <CommandList>
+                                <CommandEmpty>Nothing found.</CommandEmpty>
+                                <CommandGroup>
+                                  {cronBranchFilteredList?.map(item => (
+                                    <CommandItem
+                                      key={item.id}
+                                      value={item.name}
+                                      onSelect={() => {
+                                        const branch = item;
+                                        if (!branch) {
+                                        return;
                                         }
-                                        value={branch}
-                                      >
-                                        <span className={`block truncate  font-normal`}>
-                                          {branch.name}
-                                        </span>
-                                      </Combobox.Option>
-                                    ))
-                                  )
-                                }
-                              </Combobox.Options>
-                            </Transition>
-                          </div>
-                        </Combobox>
+                                        setSearchParams({
+                                        ...Object.fromEntries(searchParams.entries()),
+                                        cron_branch_name: branch.name,
+                                        cron_branch_id: branch.id.toString(),
+                                        });
+                                        setCronBranchSelected(branch);
+                                      }}
+                                    >
+                                      {item.name}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
                       </div>
                     </div>
                   ) : (
@@ -1722,7 +1438,7 @@ export default function ({ localServer }: { localServer: string }) {
                         <label htmlFor="mergeEventTagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
                           Branch
                         </label>
-                        <div className="mt-2 flex flex-row items-center h-[36px]">
+                        <div className="mt-2 flex flex-row items-center h-9">
                           <input
                             type="text"
                             name="mergeEventTagTemplate"
@@ -1742,7 +1458,7 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="mergeEventTagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
                         OCI tag template
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <input
                           type="text"
                           name="mergeEventTagTemplate"
@@ -1767,10 +1483,10 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                         Merge Event
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <label className="relative inline-flex items-center cursor-pointer">
                           <input type="checkbox" checked={mergeEvent} className="sr-only peer" onChange={e => { setMergeEvent(e.target.checked); }} />
-                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                         </label>
                       </div>
                     </div>
@@ -1781,68 +1497,50 @@ export default function ({ localServer }: { localServer: string }) {
                             Branch
                           </label>
                           <div className="mt-2">
-                            <Combobox value={mergeEventBranchSelected} onChange={(branch: ICodeRepositoryBranchItem | null) => {
-                              if (!branch) {
-                                return;
-                              }
-                              setSearchParams({
-                                ...Object.fromEntries(searchParams.entries()),
-                                merge_event_branch_name: branch.name,
-                                merge_event_branch_id: branch.id.toString(),
-                              });
-                              setMergeEventBranchSelected(branch);
-                            }}>
-                              <div className="relative mt-1">
-                                <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                  <Combobox.Input
-                                    id="branch"
-                                    className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                    displayValue={(branch: ICodeRepositoryBranchItem) => branch.name}
-                                    onChange={(event) => {
-                                      setMergeEventBranchSearch(event.target.value);
-                                    }}
+                            <Popover>
+                              <PopoverTrigger
+                                render={
+                                  <Button variant="outline" className="w-full justify-between font-normal">
+                                    {mergeEventBranchSelected?.name || "Select"}
+                                    <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                                  </Button>
+                                }
+                              />
+                              <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                                <Command shouldFilter={false}>
+                                  <CommandInput
+                                    placeholder="Search"
+                                    value={mergeEventBranchSearch}
+                                    onValueChange={setMergeEventBranchSearch}
                                   />
-                                  <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <ChevronUpDownIcon
-                                      className="h-5 w-5 text-gray-400"
-                                      aria-hidden="true"
-                                    />
-                                  </Combobox.Button>
-                                </div>
-                                <Transition
-                                  as={Fragment}
-                                  leave="transition ease-in duration-100"
-                                  leaveFrom="opacity-100"
-                                  leaveTo="opacity-0"
-                                  afterLeave={() => setMergeEventBranchSearch('')}
-                                >
-                                  <Combobox.Options className="absolute mt-1 max-h-60 bottom-12 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                    {
-                                      mergeEventBranchFilteredList?.length === 0 ? (
-                                        <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                          Nothing found.
-                                        </div>
-                                      ) : (
-                                        mergeEventBranchFilteredList?.map(branch => (
-                                          <Combobox.Option
-                                            key={branch.id}
-                                            className={({ active }) =>
-                                              `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                              }`
+                                  <CommandList>
+                                    <CommandEmpty>Nothing found.</CommandEmpty>
+                                    <CommandGroup>
+                                      {mergeEventBranchFilteredList?.map(item => (
+                                        <CommandItem
+                                          key={item.id}
+                                          value={item.name}
+                                          onSelect={() => {
+                                            const branch = item;
+                                            if (!branch) {
+                                            return;
                                             }
-                                            value={branch}
-                                          >
-                                            <span className={`block truncate  font-normal`}>
-                                              {branch.name}
-                                            </span>
-                                          </Combobox.Option>
-                                        ))
-                                      )
-                                    }
-                                  </Combobox.Options>
-                                </Transition>
-                              </div>
-                            </Combobox>
+                                            setSearchParams({
+                                            ...Object.fromEntries(searchParams.entries()),
+                                            merge_event_branch_name: branch.name,
+                                            merge_event_branch_id: branch.id.toString(),
+                                            });
+                                            setMergeEventBranchSelected(branch);
+                                          }}
+                                        >
+                                          {item.name}
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </div>
                       ) : (
@@ -1851,7 +1549,7 @@ export default function ({ localServer }: { localServer: string }) {
                             <label htmlFor="mergeEventBranch" className="block text-sm font-medium leading-6 text-gray-900">
                               Branch
                             </label>
-                            <div className="mt-2 flex flex-row items-center h-[36px]">
+                            <div className="mt-2 flex flex-row items-center h-9">
                               <input
                                 type="text"
                                 name="mergeEventBranch"
@@ -1871,7 +1569,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="mergeEventTagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
                             OCI tag template
                           </label>
-                          <div className="mt-2 flex flex-row items-center h-[36px]">
+                          <div className="mt-2 flex flex-row items-center h-9">
                             <input
                               type="text"
                               name="mergeEventTagTemplate"
@@ -1890,10 +1588,10 @@ export default function ({ localServer }: { localServer: string }) {
                       <label htmlFor="branch" className="block text-sm font-medium leading-6 text-gray-900">
                         Tag Event
                       </label>
-                      <div className="mt-2 flex flex-row items-center h-[36px]">
+                      <div className="mt-2 flex flex-row items-center h-9">
                         <label className="relative inline-flex items-center cursor-pointer">
                           <input type="checkbox" checked={tagEvent} className="sr-only peer" onChange={e => { SetTagEvent(e.target.checked); }} />
-                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                         </label>
                       </div>
                     </div>
@@ -1903,7 +1601,7 @@ export default function ({ localServer }: { localServer: string }) {
                           <label htmlFor="tagEventTagTemplate" className="block text-sm font-medium leading-6 text-gray-900">
                             OCI tag template
                           </label>
-                          <div className="mt-2 flex flex-row items-center h-[36px]">
+                          <div className="mt-2 flex flex-row items-center h-9">
                             <input
                               type="text"
                               name="tagEventTagTemplate"
diff --git a/web/src/pages/CodeRepository/List.tsx b/web/src/pages/CodeRepository/List.tsx
index e986ae21..a6ef79db 100644
--- a/web/src/pages/CodeRepository/List.tsx
+++ b/web/src/pages/CodeRepository/List.tsx
@@ -22,7 +22,6 @@ import {
   ICodeRepositoryOwnerItem,
   ICodeRepositoryOwnerList,
   ICodeRepositoryUser3rdParty,
-  IHTTPError,
   IOrder
 } from '../../interfaces';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -134,7 +133,7 @@ export default function ({ localServer }: { localServer: string }) {
       <HelmetProvider>
         <Helmet><title>{t("common.codeRepository")}</title></Helmet>
       </HelmetProvider>
-      <div className="min-h-screen flex overflow-hidden bg-background min-w-[1600px]">
+      <div className="min-h-screen flex overflow-hidden bg-background min-w-400">
         <HeaderMenu localServer={localServer} item="coderepos" />
         <div className="flex flex-col flex-1 max-h-screen">
           <main className="relative focus:outline-none" tabIndex={0}>
diff --git a/web/src/pages/CodeRepository/index.tsx b/web/src/pages/CodeRepository/index.tsx
index 0ccbde0e..3dfe1cf2 100644
--- a/web/src/pages/CodeRepository/index.tsx
+++ b/web/src/pages/CodeRepository/index.tsx
@@ -115,7 +115,7 @@ export default function ({ localServer }: { localServer: string }) {
           <title>{t("common.codeRepository")}</title>
         </Helmet>
       </HelmetProvider>
-      <div className="min-h-screen flex overflow-hidden bg-white dark:bg-gray-950 min-w-[1600px]">
+      <div className="min-h-screen flex overflow-hidden bg-white dark:bg-gray-950 min-w-400">
         <Menu localServer={localServer} item="coderepos" />
         <div className="flex flex-col flex-1 max-h-screen">
           <main className="relative z-0 focus:outline-none" tabIndex={0}>
diff --git a/web/src/pages/DaemonTask/Records.tsx b/web/src/pages/DaemonTask/Records.tsx
index 869aa005..c8791ebb 100644
--- a/web/src/pages/DaemonTask/Records.tsx
+++ b/web/src/pages/DaemonTask/Records.tsx
@@ -15,7 +15,6 @@
  */
 
 import axios from "axios";
-import dayjs from 'dayjs';
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, useLocation, useParams, useSearchParams } from 'react-router-dom';
diff --git a/web/src/pages/DaemonTask/Runners.tsx b/web/src/pages/DaemonTask/Runners.tsx
index 1b27745c..5f5942d4 100644
--- a/web/src/pages/DaemonTask/Runners.tsx
+++ b/web/src/pages/DaemonTask/Runners.tsx
@@ -16,7 +16,6 @@
 
 import Toast from 'react-hot-toast';
 import axios from "axios";
-import dayjs from 'dayjs';
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
diff --git a/web/src/pages/DaemonTask/Tasks.tsx b/web/src/pages/DaemonTask/Tasks.tsx
index c529d50e..a505bff3 100644
--- a/web/src/pages/DaemonTask/Tasks.tsx
+++ b/web/src/pages/DaemonTask/Tasks.tsx
@@ -18,9 +18,7 @@ import Toast from 'react-hot-toast';
 import axios from "axios";
 import dayjs from 'dayjs';
 import parser from 'cron-parser';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { Dialog, Listbox, Menu, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon, EllipsisVerticalIcon } from '@heroicons/react/20/solid';
+import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
@@ -30,6 +28,27 @@ import Header from "../../components/Header";
 import IMenu from "../../components/Menu";
 import Notification from "../../components/Notification";
 import { useTranslation } from "../../i18n/useTranslation";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   IGcArtifactRule,
   IGcArtifactRunnerItem,
@@ -688,59 +707,24 @@ export default function ({ localServer }: { localServer: string }) {
                         {gcRepositoryRuleExist && gcRepositoryRule.cron_enabled && gcRepositoryRule.cron_next_trigger != undefined ? gcRepositoryRule.cron_next_trigger : "-"}
                       </td>
                       <td className="pr-3 whitespace-nowrap">
-                        <Menu as="div" className="relative flex-none" onClick={e => {
-                          e.stopPropagation();
-                        }}>
-                          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-                            <span className="sr-only">Open options</span>
-                            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-                          </Menu.Button>
-                          <Transition
-                            as={Fragment}
-                            enter="transition ease-out duration-100"
-                            enterFrom="transform opacity-0 scale-95"
-                            enterTo="transform opacity-100 scale-100"
-                            leave="transition ease-in duration-75"
-                            leaveFrom="transform opacity-100 scale-100"
-                            leaveTo="transform opacity-0 scale-95"
-                          >
-                            <Menu.Items className={(1 > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-30 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900 cursor-pointer'
-                                    }
-                                    onClick={e => { setGcRepositoryRuleConfigModal(true); }}
-                                  >
-                                    {
-                                      gcRepositoryRuleExist ? "Update" : "Configuration"
-                                    }
-                                  </div>
-                                )}
-                              </Menu.Item>
-                              <Menu.Item
-                                disabled={!gcRepositoryRuleExist}
-                              >
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      (gcRepositoryRuleExist ? ' cursor-pointer ' : ' cursor-not-allowed ') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                                    }
-                                    onClick={e => {
-                                      createGcRepositoryRunner();
-                                    }}
-                                  >
-                                    Run
-                                  </div>
-                                )}
-                              </Menu.Item>
-                            </Menu.Items>
-                          </Transition>
-                        </Menu>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger
+                            render={
+                              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                                <span className="sr-only">Open options</span>
+                                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+                              </Button>
+                            }
+                          />
+                          <DropdownMenuContent align="end" className="w-30">
+                            <DropdownMenuItem onClick={() => setGcRepositoryRuleConfigModal(true)}>
+                              {gcRepositoryRuleExist ? "Update" : "Configuration"}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem disabled={!gcRepositoryRuleExist} onClick={() => createGcRepositoryRunner()}>
+                              Run
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </td>
                     </tr>
                     <tr className="border-b">
@@ -770,57 +754,24 @@ export default function ({ localServer }: { localServer: string }) {
                         {gcTagRuleExist && gcTagRule.cron_enabled && gcTagRule.cron_next_trigger != undefined ? gcTagRule.cron_next_trigger : "-"}
                       </td>
                       <td className="pr-3 whitespace-nowrap">
-                        <Menu as="div" className="relative flex-none" onClick={e => {
-                          e.stopPropagation();
-                        }}>
-                          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-                            <span className="sr-only">Open options</span>
-                            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-                          </Menu.Button>
-                          <Transition
-                            as={Fragment}
-                            enter="transition ease-out duration-100"
-                            enterFrom="transform opacity-0 scale-95"
-                            enterTo="transform opacity-100 scale-100"
-                            leave="transition ease-in duration-75"
-                            leaveFrom="transform opacity-100 scale-100"
-                            leaveTo="transform opacity-0 scale-95"
-                          >
-                            <Menu.Items className={(1 > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-30 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900 cursor-pointer'
-                                    }
-                                    onClick={e => { setGcTagRuleConfigModal(true) }}
-                                  >
-                                    {
-                                      gcTagRuleExist ? "Update" : "Configuration"
-                                    }
-                                  </div>
-                                )}
-                              </Menu.Item>
-                              <Menu.Item
-                                disabled={!gcTagRuleExist}
-                              >
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      (gcTagRuleExist ? ' cursor-pointer ' : ' cursor-not-allowed ') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                                    }
-                                    onClick={e => createGcTagRunner()}
-                                  >
-                                    Run
-                                  </div>
-                                )}
-                              </Menu.Item>
-                            </Menu.Items>
-                          </Transition>
-                        </Menu>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger
+                            render={
+                              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                                <span className="sr-only">Open options</span>
+                                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+                              </Button>
+                            }
+                          />
+                          <DropdownMenuContent align="end" className="w-30">
+                            <DropdownMenuItem onClick={() => setGcTagRuleConfigModal(true)}>
+                              {gcTagRuleExist ? "Update" : "Configuration"}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem disabled={!gcTagRuleExist} onClick={() => createGcTagRunner()}>
+                              Run
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </td>
                     </tr>
                     <tr className="border-b">
@@ -850,57 +801,24 @@ export default function ({ localServer }: { localServer: string }) {
                         {gcArtifactRuleExist && gcArtifactRule.cron_enabled && gcArtifactRule.cron_next_trigger != undefined ? gcArtifactRule.cron_next_trigger : "-"}
                       </td>
                       <td className="pr-3 whitespace-nowrap">
-                        <Menu as="div" className="relative flex-none" onClick={e => {
-                          e.stopPropagation();
-                        }}>
-                          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-                            <span className="sr-only">Open options</span>
-                            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-                          </Menu.Button>
-                          <Transition
-                            as={Fragment}
-                            enter="transition ease-out duration-100"
-                            enterFrom="transform opacity-0 scale-95"
-                            enterTo="transform opacity-100 scale-100"
-                            leave="transition ease-in duration-75"
-                            leaveFrom="transform opacity-100 scale-100"
-                            leaveTo="transform opacity-0 scale-95"
-                          >
-                            <Menu.Items className={(1 > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-30 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900 cursor-pointer'
-                                    }
-                                    onClick={e => { setGcArtifactRuleConfigModal(true) }}
-                                  >
-                                    {
-                                      gcArtifactRuleExist ? "Update" : "Configuration"
-                                    }
-                                  </div>
-                                )}
-                              </Menu.Item>
-                              <Menu.Item
-                                disabled={!gcArtifactRuleExist}
-                              >
-                                {({ active }) => (
-                                  <div
-                                    className={
-                                      (active ? 'bg-gray-100' : '') +
-                                      (gcArtifactRuleExist ? ' cursor-pointer ' : ' cursor-not-allowed ') +
-                                      ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                                    }
-                                    onClick={e => createGcArtifactRunner()}
-                                  >
-                                    Run
-                                  </div>
-                                )}
-                              </Menu.Item>
-                            </Menu.Items>
-                          </Transition>
-                        </Menu>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger
+                            render={
+                              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                                <span className="sr-only">Open options</span>
+                                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+                              </Button>
+                            }
+                          />
+                          <DropdownMenuContent align="end" className="w-30">
+                            <DropdownMenuItem onClick={() => setGcArtifactRuleConfigModal(true)}>
+                              {gcArtifactRuleExist ? "Update" : "Configuration"}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem disabled={!gcArtifactRuleExist} onClick={() => createGcArtifactRunner()}>
+                              Run
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </td>
                     </tr>
                     {
@@ -932,57 +850,24 @@ export default function ({ localServer }: { localServer: string }) {
                             {gcBlobRuleExist && gcBlobRule.cron_enabled && gcBlobRule.cron_next_trigger != undefined ? gcBlobRule.cron_next_trigger : "-"}
                           </td>
                           <td className="pr-3 whitespace-nowrap">
-                            <Menu as="div" className="relative flex-none" onClick={e => {
-                              e.stopPropagation();
-                            }}>
-                              <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-                                <span className="sr-only">Open options</span>
-                                <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-                              </Menu.Button>
-                              <Transition
-                                as={Fragment}
-                                enter="transition ease-out duration-100"
-                                enterFrom="transform opacity-0 scale-95"
-                                enterTo="transform opacity-100 scale-100"
-                                leave="transition ease-in duration-75"
-                                leaveFrom="transform opacity-100 scale-100"
-                                leaveTo="transform opacity-0 scale-95"
-                              >
-                                <Menu.Items className={(1 > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-30 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-                                  <Menu.Item>
-                                    {({ active }) => (
-                                      <div
-                                        className={
-                                          (active ? 'bg-gray-100' : '') +
-                                          ' block px-3 py-1 text-sm leading-6 text-gray-900 cursor-pointer'
-                                        }
-                                        onClick={e => { setGcBlobRuleConfigModal(true) }}
-                                      >
-                                        {
-                                          gcBlobRuleExist ? "Update" : "Configuration"
-                                        }
-                                      </div>
-                                    )}
-                                  </Menu.Item>
-                                  <Menu.Item
-                                    disabled={!gcBlobRuleExist}
-                                  >
-                                    {({ active }) => (
-                                      <div
-                                        className={
-                                          (active ? 'bg-gray-100' : '') +
-                                          (gcBlobRuleExist ? ' cursor-pointer ' : ' cursor-not-allowed ') +
-                                          ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                                        }
-                                        onClick={e => createGcBlobRunner()}
-                                      >
-                                        Run
-                                      </div>
-                                    )}
-                                  </Menu.Item>
-                                </Menu.Items>
-                              </Transition>
-                            </Menu>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger
+                                render={
+                                  <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                                    <span className="sr-only">Open options</span>
+                                    <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+                                  </Button>
+                                }
+                              />
+                              <DropdownMenuContent align="end" className="w-30">
+                                <DropdownMenuItem onClick={() => setGcBlobRuleConfigModal(true)}>
+                                  {gcBlobRuleExist ? "Update" : "Configuration"}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem disabled={!gcBlobRuleExist} onClick={() => createGcBlobRunner()}>
+                                  Run
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           </td>
                         </tr>
                       )
@@ -997,7 +882,7 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-gc-repository-retention-days"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[350px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-87.5">
         Retention the empty repository for specific days,
         0 means delete immediately, available 0-180
       </div>
@@ -1010,7 +895,7 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-gc-blob-retention-days"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[350px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-87.5">
         Retention the blob for specific days,
         0 means delete immediately, available 0-180
       </div>
@@ -1023,7 +908,7 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-gc-artifact-retention-days"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[350px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-87.5">
         Retention the artifact for specific days,
         0 means delete immediately, available 0-180
       </div>
@@ -1036,14 +921,14 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-gc-tag-retention-amount"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[350px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-87.5">
         Retention the tag for specific days or quantity,
         available 1-180
       </div>
       <div
         id="tooltip-gc-tag-retention-pattern"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[350px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-87.5">
         Retention the tag for specific regexp,
         please try 'v.*'
       </div>
@@ -1053,49 +938,104 @@ export default function ({ localServer }: { localServer: string }) {
         className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
         '0 0 * * 6' means run at 00:00 every Saturday
       </div>
-      <Transition.Root show={gcBlobRuleConfigModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setGcBlobRuleConfigModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Garbage collect blob config
-                  </Dialog.Title>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-6 gap-4">
+      <Dialog open={gcBlobRuleConfigModal} onOpenChange={setGcBlobRuleConfigModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Garbage collect blob config</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Retention Days</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcBlobRetentionDaysHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-blob-retention-days"),
+                            document.getElementById("gcBlobRetentionDaysHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      id="namespace_count_limit"
+                      name="namespace_count_limit"
+                      placeholder="0 means no limit"
+                      className={(gcBlobRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                      value={gcBlobRuleRetentionDays}
+                      onChange={e => setGcBlobRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                    />
+                    {
+                      gcBlobRuleRetentionDaysValid ? null : (
+                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-4">
+                  {
+                    gcBlobRuleRetentionDaysValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Not a valid retention days limit, available 0-180.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Cron Enabled</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="mt-0.5 flex flex-row items-center h-9">
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" checked={gcBlobRuleCronEnabled} className="sr-only peer" onChange={e => {
+                        setGcBlobRuleCronEnabled(e.target.checked);
+                      }} />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              {
+                !gcBlobRuleCronEnabled ? null : (
+                  <>
+                    <div className="grid grid-cols-6 gap-4 mt-4">
                       <div className="col-span-2 flex flex-row">
                         <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
                           <div className="flex">
                             <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Retention Days</span>
+                            <span className="leading-6 ">Cron Rule</span>
                             <div className="flex flex-row cursor-pointer"
-                              id="gcBlobRetentionDaysHelp"
+                              id="gcBlobRuleHelp"
                               onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-blob-retention-days"),
-                                  document.getElementById("gcBlobRetentionDaysHelp"), { triggerType: "click" });
+                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-blob-cron-rule"),
+                                  document.getElementById("gcBlobRuleHelp"), { triggerType: "click" });
                                 tooltip.show();
                               }}
                             >
@@ -1107,19 +1047,20 @@ export default function ({ localServer }: { localServer: string }) {
                           </div>
                         </label>
                       </div>
+
                       <div className="col-span-4">
                         <div className="relative rounded-md shadow-sm">
                           <input
                             type="text"
-                            id="namespace_count_limit"
-                            name="namespace_count_limit"
-                            placeholder="0 means no limit"
-                            className={(gcBlobRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={gcBlobRuleRetentionDays}
-                            onChange={e => setGcBlobRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                            id="gc_repository_cron_rule"
+                            name="gc_repository_cron_rule"
+                            placeholder="cron rule"
+                            className={(gcBlobRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                            value={gcBlobRuleCronRule}
+                            onChange={e => setGcBlobRuleCronRule(e.target.value)}
                           />
                           {
-                            gcBlobRuleRetentionDaysValid ? null : (
+                            gcBlobRuleCronRuleValid ? null : (
                               <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
                                   <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
@@ -1131,689 +1072,331 @@ export default function ({ localServer }: { localServer: string }) {
                       </div>
                     </div>
                     <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2"></div>
-                      <div className="col-span-4">
-                        {
-                          gcBlobRuleRetentionDaysValid ? null : (
-                            <p className="mt-1 text-xs text-red-600">
-                              <span>
-                                Not a valid retention days limit, available 0-180.
-                              </span>
-                            </p>
-                          )
-                        }
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Cron Enabled</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <div className="mt-0.5 flex flex-row items-center h-[36px]">
-                          <label className="relative inline-flex items-center cursor-pointer">
-                            <input type="checkbox" checked={gcBlobRuleCronEnabled} className="sr-only peer" onChange={e => {
-                              setGcBlobRuleCronEnabled(e.target.checked);
-                            }} />
-                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    {
-                      !gcBlobRuleCronEnabled ? null : (
-                        <>
-                          <div className="grid grid-cols-6 gap-4 mt-4">
-                            <div className="col-span-2 flex flex-row">
-                              <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                                <div className="flex">
-                                  <span className="text-red-600">*</span>
-                                  <span className="leading-6 ">Cron Rule</span>
-                                  <div className="flex flex-row cursor-pointer"
-                                    id="gcBlobRuleHelp"
-                                    onClick={e => {
-                                      let tooltip = new Tooltip(document.getElementById("tooltip-gc-blob-cron-rule"),
-                                        document.getElementById("gcBlobRuleHelp"), { triggerType: "click" });
-                                      tooltip.show();
-                                    }}
-                                  >
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                                    </svg>
-                                  </div>
-                                  <span>:</span>
-                                </div>
-                              </label>
-                            </div>
-
-                            <div className="col-span-4">
-                              <div className="relative rounded-md shadow-sm">
-                                <input
-                                  type="text"
-                                  id="gc_repository_cron_rule"
-                                  name="gc_repository_cron_rule"
-                                  placeholder="cron rule"
-                                  className={(gcBlobRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                                  value={gcBlobRuleCronRule}
-                                  onChange={e => setGcBlobRuleCronRule(e.target.value)}
-                                />
-                                {
-                                  gcBlobRuleCronRuleValid ? null : (
-                                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                      </svg>
-                                    </div>
-                                  )
-                                }
-                              </div>
-                            </div>
-                          </div>
-                          <div className="grid grid-cols-6 gap-4">
-                            <div className="col-span-2">
-                            </div>
-                            <div className="col-span-4">
-                              {
-                                !gcBlobRuleCronRuleValid ? (
-                                  <p className="mt-1 text-xs text-red-600">
-                                    <span>
-                                      Not a valid cron rule, you can try '0 0 * * 6'.
-                                    </span>
-                                  </p>
-                                ) : gcBlobRuleCronRule == "" ? null : (
-                                  <p className="mt-1 text-xs text-gray-600">
-                                    <span>
-                                      Next run at '{gcBlobRuleCronRuleNextRunAt}'.
-                                    </span>
-                                  </p>
-                                )
-                              }
-                            </div>
-                          </div>
-                        </>
-                      )
-                    }
-                    <div className="flex flex-row-reverse mt-5">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => createOrUpdateGcBlob()}
-                      >
-                        {
-                          gcBlobRuleExist ? "Update" : "Create"
-                        }
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setGcBlobRuleConfigModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-      <Transition.Root show={gcRepositoryRuleConfigModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setGcRepositoryRuleConfigModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Garbage collect empty repository config
-                  </Dialog.Title>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Retention Days</span>
-                            <div className="flex flex-row cursor-pointer"
-                              id="gcRepositoryRetentionDaysHelp"
-                              onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
-                                  document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
-                                tooltip.show();
-                              }}
-                            >
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                              </svg>
-                            </div>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <div className="relative rounded-md shadow-sm">
-                          <input
-                            type="text"
-                            id="namespace_count_limit"
-                            name="namespace_count_limit"
-                            placeholder="0 means no limit"
-                            className={(gcRepositoryRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={gcRepositoryRuleRetentionDays}
-                            onChange={e => setGcRepositoryRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                          />
-                          {
-                            gcRepositoryRuleRetentionDaysValid ? null : (
-                              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                </svg>
-                              </div>
-                            )
-                          }
-                        </div>
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2"></div>
-                      <div className="col-span-4">
-                        {
-                          gcRepositoryRuleRetentionDaysValid ? null : (
-                            <p className="mt-1 text-xs text-red-600">
-                              <span>
-                                Not a valid retention days limit, available 0-180.
-                              </span>
-                            </p>
-                          )
-                        }
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Cron Enabled</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <div className="mt-0.5 flex flex-row items-center h-[36px]">
-                          <label className="relative inline-flex items-center cursor-pointer">
-                            <input type="checkbox" checked={gcRepositoryRuleCronEnabled} className="sr-only peer" onChange={e => {
-                              setGcRepositoryRuleCronEnabled(e.target.checked);
-                            }} />
-                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    {
-                      !gcRepositoryRuleCronEnabled ? null : (
-                        <>
-                          <div className="grid grid-cols-6 gap-4 mt-4">
-                            <div className="col-span-2 flex flex-row">
-                              <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                                <div className="flex">
-                                  <span className="text-red-600">*</span>
-                                  <span className="leading-6 ">Cron Rule</span>
-                                  <div className="flex flex-row cursor-pointer"
-                                    id="gcRepositoryRuleHelp"
-                                    onClick={e => {
-                                      let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-cron-rule"),
-                                        document.getElementById("gcRepositoryRuleHelp"), { triggerType: "click" });
-                                      tooltip.show();
-                                    }}
-                                  >
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                                    </svg>
-                                  </div>
-                                  <span>:</span>
-                                </div>
-                              </label>
-                            </div>
-
-                            <div className="col-span-4">
-                              <div className="relative rounded-md shadow-sm">
-                                <input
-                                  type="text"
-                                  id="gc_repository_cron_rule"
-                                  name="gc_repository_cron_rule"
-                                  placeholder="cron rule"
-                                  className={(gcRepositoryRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                                  value={gcRepositoryRuleCronRule}
-                                  onChange={e => setGcRepositoryRuleCronRule(e.target.value)}
-                                />
-                                {
-                                  gcRepositoryRuleCronRuleValid ? null : (
-                                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                      </svg>
-                                    </div>
-                                  )
-                                }
-                              </div>
-
-                            </div>
-                          </div>
-                          <div className="grid grid-cols-6 gap-4">
-                            <div className="col-span-2">
-                            </div>
-                            <div className="col-span-4">
-                              {
-                                !gcRepositoryRuleCronRuleValid ? (
-                                  <p className="mt-1 text-xs text-red-600">
-                                    <span>
-                                      Not a valid cron rule, you can try '0 0 * * 6'.
-                                    </span>
-                                  </p>
-                                ) : gcRepositoryRuleCronRule == "" ? null : (
-                                  <p className="mt-1 text-xs text-gray-600">
-                                    <span>
-                                      Next run at '{gcRepositoryRuleCronRuleNextRunAt}'.
-                                    </span>
-                                  </p>
-                                )
-                              }
-                            </div>
-                          </div>
-                        </>
-                      )
-                    }
-                    <div className="flex flex-row-reverse mt-5">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => createOrUpdateGcRepository()}
-                      >
-                        {
-                          gcRepositoryRuleExist ? "Update" : "Create"
-                        }
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setGcRepositoryRuleConfigModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-      <Transition.Root show={gcArtifactRuleConfigModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setGcArtifactRuleConfigModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Garbage collect artifact config
-                  </Dialog.Title>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Retention Days</span>
-                            <div className="flex flex-row cursor-pointer"
-                              id="gcArtifactRetentionDaysHelp"
-                              onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-artifact-retention-days"),
-                                  document.getElementById("gcArtifactRetentionDaysHelp"), { triggerType: "click" });
-                                tooltip.show();
-                              }}
-                            >
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                              </svg>
-                            </div>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <div className="relative rounded-md shadow-sm">
-                          <input
-                            type="text"
-                            id="namespace_count_limit"
-                            name="namespace_count_limit"
-                            placeholder="0 means no limit"
-                            className={(gcArtifactRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={gcArtifactRuleRetentionDays}
-                            onChange={e => setGcArtifactRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                          />
-                          {
-                            gcArtifactRuleRetentionDaysValid ? null : (
-                              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                </svg>
-                              </div>
-                            )
-                          }
-                        </div>
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2"></div>
-                      <div className="col-span-4">
-                        {
-                          gcArtifactRuleRetentionDaysValid ? null : (
-                            <p className="mt-1 text-xs text-red-600">
-                              <span>
-                                Not a valid retention days limit, available 0-180.
-                              </span>
-                            </p>
-                          )
-                        }
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Cron Enabled</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <div className="mt-0.5 flex flex-row items-center h-[36px]">
-                          <label className="relative inline-flex items-center cursor-pointer">
-                            <input type="checkbox" checked={gcArtifactCronEnabled} className="sr-only peer" onChange={e => {
-                              setGcArtifactCronEnabled(e.target.checked);
-                            }} />
-                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    {
-                      !gcArtifactCronEnabled ? null : (
-                        <>
-                          <div className="grid grid-cols-6 gap-4 mt-4">
-                            <div className="col-span-2 flex flex-row">
-                              <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                                <div className="flex">
-                                  <span className="text-red-600">*</span>
-                                  <span className="leading-6 ">Cron Rule</span>
-                                  <div className="flex flex-row cursor-pointer"
-                                    id="gcArtifactRuleHelp"
-                                    onClick={e => {
-                                      let tooltip = new Tooltip(document.getElementById("tooltip-gc-artifact-cron-rule"),
-                                        document.getElementById("gcArtifactRuleHelp"), { triggerType: "click" });
-                                      tooltip.show();
-                                    }}
-                                  >
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                                    </svg>
-                                  </div>
-                                  <span>:</span>
-                                </div>
-                              </label>
-                            </div>
-                            <div className="col-span-4">
-                              <div className="relative rounded-md shadow-sm">
-                                <input
-                                  type="text"
-                                  id="gc_repository_cron_rule"
-                                  name="gc_repository_cron_rule"
-                                  placeholder="cron rule"
-                                  className={(gcArtifactRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                                  value={gcArtifactRuleCronRule}
-                                  onChange={e => setGcArtifactRuleCronRule(e.target.value)}
-                                />
-                                {
-                                  gcArtifactRuleCronRuleValid ? null : (
-                                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                      </svg>
-                                    </div>
-                                  )
-                                }
-                              </div>
-                            </div>
-                          </div>
-                          <div className="grid grid-cols-6 gap-4">
-                            <div className="col-span-2">
-                            </div>
-                            <div className="col-span-4">
-                              {
-                                !gcArtifactRuleCronRuleValid ? (
-                                  <p className="mt-1 text-xs text-red-600">
-                                    <span>
-                                      Not a valid cron rule, you can try '0 0 * * 6'.
-                                    </span>
-                                  </p>
-                                ) : gcArtifactRuleCronRule == "" ? null : (
-                                  <p className="mt-1 text-xs text-gray-600">
-                                    <span>
-                                      Next run at '{gcArtifactRuleCronRuleNextRunAt}'.
-                                    </span>
-                                  </p>
-                                )
-                              }
-                            </div>
-                          </div>
-                        </>
-                      )
-                    }
-                    <div className="flex flex-row-reverse mt-5">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => createOrUpdateGcArtifact()}
-                      >
-                        {
-                          gcArtifactRuleExist ? "Update" : "Create"
-                        }
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setGcArtifactRuleConfigModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-      <Transition.Root show={gcTagRuleConfigModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setGcTagRuleConfigModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all min-w-[700px]">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Garbage collect tag config
-                  </Dialog.Title>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-8 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Retention Amount</span>
-                            <div className="flex flex-row cursor-pointer"
-                              id="gcTagRetentionAmountHelp"
-                              onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-retention-amount"),
-                                  document.getElementById("gcTagRetentionAmountHelp"), { triggerType: "click" });
-                                tooltip.show();
-                              }}
-                            >
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                              </svg>
-                            </div>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
                       <div className="col-span-2">
-                        <Listbox
-                          value={gcTagRuleRetentionType}
-                          onChange={(source: string) => {
-                            setGcTagRuleRetentionType(source);
-                          }}>
-                          <div className="relative w-full">
-                            <Listbox.Button
-                              className={() => {
-                                let cursor = ''
-                                if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                  cursor = 'cursor-not-allowed ';
-                                } else {
-                                  cursor = 'cursor-pointer ';
-                                }
-                                return cursor + "relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+                      </div>
+                      <div className="col-span-4">
+                        {
+                          !gcBlobRuleCronRuleValid ? (
+                            <p className="mt-1 text-xs text-red-600">
+                              <span>
+                                Not a valid cron rule, you can try '0 0 * * 6'.
+                              </span>
+                            </p>
+                          ) : gcBlobRuleCronRule == "" ? null : (
+                            <p className="mt-1 text-xs text-gray-600">
+                              <span>
+                                Next run at '{gcBlobRuleCronRuleNextRunAt}'.
+                              </span>
+                            </p>
+                          )
+                        }
+                      </div>
+                    </div>
+                  </>
+                )
+              }
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setGcBlobRuleConfigModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => createOrUpdateGcBlob()}>
+              {gcBlobRuleExist ? "Update" : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={gcRepositoryRuleConfigModal} onOpenChange={setGcRepositoryRuleConfigModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Garbage collect empty repository config</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Retention Days</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcRepositoryRetentionDaysHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
+                            document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      id="namespace_count_limit"
+                      name="namespace_count_limit"
+                      placeholder="0 means no limit"
+                      className={(gcRepositoryRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                      value={gcRepositoryRuleRetentionDays}
+                      onChange={e => setGcRepositoryRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                    />
+                    {
+                      gcRepositoryRuleRetentionDaysValid ? null : (
+                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-4">
+                  {
+                    gcRepositoryRuleRetentionDaysValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Not a valid retention days limit, available 0-180.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Cron Enabled</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="mt-0.5 flex flex-row items-center h-9">
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" checked={gcRepositoryRuleCronEnabled} className="sr-only peer" onChange={e => {
+                        setGcRepositoryRuleCronEnabled(e.target.checked);
+                      }} />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              {
+                !gcRepositoryRuleCronEnabled ? null : (
+                  <>
+                    <div className="grid grid-cols-6 gap-4 mt-4">
+                      <div className="col-span-2 flex flex-row">
+                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                          <div className="flex">
+                            <span className="text-red-600">*</span>
+                            <span className="leading-6 ">Cron Rule</span>
+                            <div className="flex flex-row cursor-pointer"
+                              id="gcRepositoryRuleHelp"
+                              onClick={e => {
+                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-cron-rule"),
+                                  document.getElementById("gcRepositoryRuleHelp"), { triggerType: "click" });
+                                tooltip.show();
                               }}
                             >
-                              <span className="block truncate">{gcTagRuleRetentionType}</span>
-                              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                <ChevronUpDownIcon
-                                  className="h-5 w-5 text-gray-400"
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            </Listbox.Button>
-                            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                              <Transition
-                                leave="transition ease-in duration-100"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                              >
-                                {
-                                  retentionAmountType.map(source => (
-                                    <Listbox.Option key={source.name} value={source.name} className={({ active }) =>
-                                      `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                      }`
-                                    }>
-                                      {({ selected }) => (
-                                        <>
-                                          <span
-                                            className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                              }`}
-                                          >
-                                            {source.name}
-                                          </span>
-                                          {
-                                            selected ? (
-                                              <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                              </span>
-                                            ) : null
-                                          }
-                                        </>
-                                      )}
-                                    </Listbox.Option>
-                                  ))
-                                }
-                              </Transition>
-                            </Listbox.Options>
+                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                              </svg>
+                            </div>
+                            <span>:</span>
                           </div>
-                        </Listbox>
+                        </label>
+                      </div>
+
+                      <div className="col-span-4">
+                        <div className="relative rounded-md shadow-sm">
+                          <input
+                            type="text"
+                            id="gc_repository_cron_rule"
+                            name="gc_repository_cron_rule"
+                            placeholder="cron rule"
+                            className={(gcRepositoryRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                            value={gcRepositoryRuleCronRule}
+                            onChange={e => setGcRepositoryRuleCronRule(e.target.value)}
+                          />
+                          {
+                            gcRepositoryRuleCronRuleValid ? null : (
+                              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                                </svg>
+                              </div>
+                            )
+                          }
+                        </div>
+
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-6 gap-4">
+                      <div className="col-span-2">
+                      </div>
+                      <div className="col-span-4">
+                        {
+                          !gcRepositoryRuleCronRuleValid ? (
+                            <p className="mt-1 text-xs text-red-600">
+                              <span>
+                                Not a valid cron rule, you can try '0 0 * * 6'.
+                              </span>
+                            </p>
+                          ) : gcRepositoryRuleCronRule == "" ? null : (
+                            <p className="mt-1 text-xs text-gray-600">
+                              <span>
+                                Next run at '{gcRepositoryRuleCronRuleNextRunAt}'.
+                              </span>
+                            </p>
+                          )
+                        }
+                      </div>
+                    </div>
+                  </>
+                )
+              }
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setGcRepositoryRuleConfigModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => createOrUpdateGcRepository()}>
+              {gcRepositoryRuleExist ? "Update" : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={gcArtifactRuleConfigModal} onOpenChange={setGcArtifactRuleConfigModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Garbage collect artifact config</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Retention Days</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcArtifactRetentionDaysHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-artifact-retention-days"),
+                            document.getElementById("gcArtifactRetentionDaysHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      id="namespace_count_limit"
+                      name="namespace_count_limit"
+                      placeholder="0 means no limit"
+                      className={(gcArtifactRuleRetentionDaysValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                      value={gcArtifactRuleRetentionDays}
+                      onChange={e => setGcArtifactRuleRetentionDays(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                    />
+                    {
+                      gcArtifactRuleRetentionDaysValid ? null : (
+                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-4">
+                  {
+                    gcArtifactRuleRetentionDaysValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Not a valid retention days limit, available 0-180.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Cron Enabled</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <div className="mt-0.5 flex flex-row items-center h-9">
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" checked={gcArtifactCronEnabled} className="sr-only peer" onChange={e => {
+                        setGcArtifactCronEnabled(e.target.checked);
+                      }} />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              {
+                !gcArtifactCronEnabled ? null : (
+                  <>
+                    <div className="grid grid-cols-6 gap-4 mt-4">
+                      <div className="col-span-2 flex flex-row">
+                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                          <div className="flex">
+                            <span className="text-red-600">*</span>
+                            <span className="leading-6 ">Cron Rule</span>
+                            <div className="flex flex-row cursor-pointer"
+                              id="gcArtifactRuleHelp"
+                              onClick={e => {
+                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-artifact-cron-rule"),
+                                  document.getElementById("gcArtifactRuleHelp"), { triggerType: "click" });
+                                tooltip.show();
+                              }}
+                            >
+                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                              </svg>
+                            </div>
+                            <span>:</span>
+                          </div>
+                        </label>
                       </div>
                       <div className="col-span-4">
                         <div className="relative rounded-md shadow-sm">
                           <input
                             type="text"
-                            id="namespace_count_limit"
-                            name="namespace_count_limit"
-                            placeholder="0 means no limit"
-                            className={(gcTagRuleRetentionAmountValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={gcTagRuleRetentionAmount}
-                            onChange={e => setGcTagRuleRetentionAmount(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                            id="gc_repository_cron_rule"
+                            name="gc_repository_cron_rule"
+                            placeholder="cron rule"
+                            className={(gcArtifactRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                            value={gcArtifactRuleCronRule}
+                            onChange={e => setGcArtifactRuleCronRule(e.target.value)}
                           />
                           {
-                            gcTagRuleRetentionAmountValid ? null : (
+                            gcArtifactRuleCronRuleValid ? null : (
                               <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
                                   <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
@@ -1824,32 +1407,216 @@ export default function ({ localServer }: { localServer: string }) {
                         </div>
                       </div>
                     </div>
-                    <div className="grid grid-cols-8 gap-4">
-                      <div className="col-span-2"></div>
-                      <div className="col-span-2"></div>
+                    <div className="grid grid-cols-6 gap-4">
+                      <div className="col-span-2">
+                      </div>
                       <div className="col-span-4">
                         {
-                          gcTagRuleRetentionAmountValid ? null : (
+                          !gcArtifactRuleCronRuleValid ? (
                             <p className="mt-1 text-xs text-red-600">
                               <span>
-                                Not a valid retention amount, available 1-180.
+                                Not a valid cron rule, you can try '0 0 * * 6'.
+                              </span>
+                            </p>
+                          ) : gcArtifactRuleCronRule == "" ? null : (
+                            <p className="mt-1 text-xs text-gray-600">
+                              <span>
+                                Next run at '{gcArtifactRuleCronRuleNextRunAt}'.
                               </span>
                             </p>
                           )
                         }
                       </div>
                     </div>
-                    <div className="grid grid-cols-8 mt-4 gap-4">
+                  </>
+                )
+              }
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setGcArtifactRuleConfigModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => createOrUpdateGcArtifact()}>
+              {gcArtifactRuleExist ? "Update" : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={gcTagRuleConfigModal} onOpenChange={setGcTagRuleConfigModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Garbage collect tag config</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              <div className="grid grid-cols-8 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Retention Amount</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcTagRetentionAmountHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-retention-amount"),
+                            document.getElementById("gcTagRetentionAmountHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-2">
+                  <Select
+                    value={gcTagRuleRetentionType}
+                    onValueChange={(source) => { if (source) setGcTagRuleRetentionType(source); }}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {retentionAmountType.map(source => (
+                        <SelectItem key={source.name} value={source.name}>
+                          {source.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="col-span-4">
+                  <div className="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      id="namespace_count_limit"
+                      name="namespace_count_limit"
+                      placeholder="0 means no limit"
+                      className={(gcTagRuleRetentionAmountValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                      value={gcTagRuleRetentionAmount}
+                      onChange={e => setGcTagRuleRetentionAmount(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                    />
+                    {
+                      gcTagRuleRetentionAmountValid ? null : (
+                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-8 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-2"></div>
+                <div className="col-span-4">
+                  {
+                    gcTagRuleRetentionAmountValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Not a valid retention amount, available 1-180.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div>
+              <div className="grid grid-cols-8 mt-4 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      {/* <span className="text-red-600">*</span> */}
+                      <span className="leading-6 ">Retention Regex</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcTagRetentionPatternHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-retention-pattern"),
+                            document.getElementById("gcTagRetentionPatternHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-6">
+                  <div className="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      id="namespace_count_limit"
+                      name="namespace_count_limit"
+                      placeholder="regexp"
+                      className={(gcTagRuleRetentionPatternValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                      value={gcTagRuleRetentionPattern}
+                      onChange={e => setGcTagRuleRetentionPattern(e.target.value)}
+                    />
+                    {
+                      gcTagRuleRetentionPatternValid ? null : (
+                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                          </svg>
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-8 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-6">
+                  {
+                    gcTagRuleRetentionPatternValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Not a valid regex, you can try 'v.*'.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div>
+              <div className="grid grid-cols-8 mt-4 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Cron Enabled</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-6">
+                  <div className="mt-0.5 flex flex-row items-center h-9">
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" checked={gcTagRuleCronEnabled} className="sr-only peer" onChange={e => {
+                        setGcTagRuleCronEnabled(e.target.checked);
+                      }} />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              {
+                !gcTagRuleCronEnabled ? null : (
+                  <>
+                    <div className="grid grid-cols-8 gap-4 mt-4">
                       <div className="col-span-2 flex flex-row">
                         <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
                           <div className="flex">
-                            {/* <span className="text-red-600">*</span> */}
-                            <span className="leading-6 ">Retention Regex</span>
+                            <span className="text-red-600">*</span>
+                            <span className="leading-6 ">Cron Rule</span>
                             <div className="flex flex-row cursor-pointer"
-                              id="gcTagRetentionPatternHelp"
+                              id="gcTagRuleHelp"
                               onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-retention-pattern"),
-                                  document.getElementById("gcTagRetentionPatternHelp"), { triggerType: "click" });
+                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-cron-rule"),
+                                  document.getElementById("gcTagRuleHelp"), { triggerType: "click" });
                                 tooltip.show();
                               }}
                             >
@@ -1865,15 +1632,15 @@ export default function ({ localServer }: { localServer: string }) {
                         <div className="relative rounded-md shadow-sm">
                           <input
                             type="text"
-                            id="namespace_count_limit"
-                            name="namespace_count_limit"
-                            placeholder="regexp"
-                            className={(gcTagRuleRetentionPatternValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={gcTagRuleRetentionPattern}
-                            onChange={e => setGcTagRuleRetentionPattern(e.target.value)}
+                            id="gc_repository_cron_rule"
+                            name="gc_repository_cron_rule"
+                            placeholder="cron rule"
+                            className={(gcTagRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                            value={gcTagRuleCronRule}
+                            onChange={e => setGcTagRuleCronRule(e.target.value)}
                           />
                           {
-                            gcTagRuleRetentionPatternValid ? null : (
+                            gcTagRuleCronRuleValid ? null : (
                               <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
                                   <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
@@ -1885,137 +1652,40 @@ export default function ({ localServer }: { localServer: string }) {
                       </div>
                     </div>
                     <div className="grid grid-cols-8 gap-4">
-                      <div className="col-span-2"></div>
+                      <div className="col-span-2">
+                      </div>
                       <div className="col-span-6">
                         {
-                          gcTagRuleRetentionPatternValid ? null : (
+                          !gcTagRuleCronRuleValid ? (
                             <p className="mt-1 text-xs text-red-600">
                               <span>
-                                Not a valid regex, you can try 'v.*'.
+                                Not a valid cron rule, you can try '0 0 * * 6'.
+                              </span>
+                            </p>
+                          ) : gcTagRuleCronRule == "" ? null : (
+                            <p className="mt-1 text-xs text-gray-600">
+                              <span>
+                                Next run at '{gcTagRuleCronRuleNextRunAt}'.
                               </span>
                             </p>
                           )
                         }
                       </div>
                     </div>
-                    <div className="grid grid-cols-8 mt-4 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Cron Enabled</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-6">
-                        <div className="mt-0.5 flex flex-row items-center h-[36px]">
-                          <label className="relative inline-flex items-center cursor-pointer">
-                            <input type="checkbox" checked={gcTagRuleCronEnabled} className="sr-only peer" onChange={e => {
-                              setGcTagRuleCronEnabled(e.target.checked);
-                            }} />
-                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    {
-                      !gcTagRuleCronEnabled ? null : (
-                        <>
-                          <div className="grid grid-cols-8 gap-4 mt-4">
-                            <div className="col-span-2 flex flex-row">
-                              <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                                <div className="flex">
-                                  <span className="text-red-600">*</span>
-                                  <span className="leading-6 ">Cron Rule</span>
-                                  <div className="flex flex-row cursor-pointer"
-                                    id="gcTagRuleHelp"
-                                    onClick={e => {
-                                      let tooltip = new Tooltip(document.getElementById("tooltip-gc-tag-cron-rule"),
-                                        document.getElementById("gcTagRuleHelp"), { triggerType: "click" });
-                                      tooltip.show();
-                                    }}
-                                  >
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                                    </svg>
-                                  </div>
-                                  <span>:</span>
-                                </div>
-                              </label>
-                            </div>
-                            <div className="col-span-6">
-                              <div className="relative rounded-md shadow-sm">
-                                <input
-                                  type="text"
-                                  id="gc_repository_cron_rule"
-                                  name="gc_repository_cron_rule"
-                                  placeholder="cron rule"
-                                  className={(gcTagRuleCronRuleValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                                  value={gcTagRuleCronRule}
-                                  onChange={e => setGcTagRuleCronRule(e.target.value)}
-                                />
-                                {
-                                  gcTagRuleCronRuleValid ? null : (
-                                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5 text-red-500">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                      </svg>
-                                    </div>
-                                  )
-                                }
-                              </div>
-                            </div>
-                          </div>
-                          <div className="grid grid-cols-8 gap-4">
-                            <div className="col-span-2">
-                            </div>
-                            <div className="col-span-6">
-                              {
-                                !gcTagRuleCronRuleValid ? (
-                                  <p className="mt-1 text-xs text-red-600">
-                                    <span>
-                                      Not a valid cron rule, you can try '0 0 * * 6'.
-                                    </span>
-                                  </p>
-                                ) : gcTagRuleCronRule == "" ? null : (
-                                  <p className="mt-1 text-xs text-gray-600">
-                                    <span>
-                                      Next run at '{gcTagRuleCronRuleNextRunAt}'.
-                                    </span>
-                                  </p>
-                                )
-                              }
-                            </div>
-                          </div>
-                        </>
-                      )
-                    }
-                    <div className="flex flex-row-reverse mt-5">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => createOrUpdateGcTag()}
-                      >
-                        {
-                          gcTagRuleExist ? "Update" : "Create"
-                        }
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setGcTagRuleConfigModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+                  </>
+                )
+              }
           </div>
-        </Dialog>
-      </Transition.Root>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setGcTagRuleConfigModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => createOrUpdateGcTag()}>
+              {gcTagRuleExist ? "Update" : "Create"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Fragment >
   )
 }
diff --git a/web/src/pages/Namespace/Member.tsx b/web/src/pages/Namespace/Member.tsx
index 4024c522..852abe1c 100644
--- a/web/src/pages/Namespace/Member.tsx
+++ b/web/src/pages/Namespace/Member.tsx
@@ -19,13 +19,37 @@ import Toast from 'react-hot-toast';
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
-import { CheckIcon, ChevronUpDownIcon, EllipsisVerticalIcon } from "@heroicons/react/20/solid";
+import { ChevronUpDownIcon, EllipsisVerticalIcon } from "@heroicons/react/20/solid";
+
+import { Button } from "@/components/ui/button";
 import {
-  Combobox, ComboboxButton, ComboboxInput, ComboboxOption,
-  ComboboxOptions, Dialog, DialogPanel, DialogTitle, Listbox,
-  ListboxButton, ListboxOption, ListboxOptions, Menu, MenuItem,
-  MenuItems, Transition, TransitionChild
-} from "@headlessui/react";
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 import Header from "../../components/Header";
 import IMenu from "../../components/Menu";
@@ -200,7 +224,7 @@ export default function Member({ localServer }: { localServer: string }) {
                 )
               }
             />
-            <div className="pt-1 pb-1 flex justify-between items-center min-h-[60px]">
+            <div className="pt-1 pb-1 flex justify-between items-center min-h-15">
               <div className="px-4">
                 <div className="flex gap-4">
                   <div className="relative mt-2 flex items-center">
@@ -272,216 +296,107 @@ export default function Member({ localServer }: { localServer: string }) {
           <Pagination limit={Settings.PageSize} page={page} setPage={setPage} total={total} />
         </div>
       </div>
-      <Transition show={createUserNamespaceModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setCreateUserNamespaceModal}>
-          <TransitionChild
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </TransitionChild>
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <TransitionChild
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <DialogPanel className="relative transform rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                  <DialogTitle
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Add member
-                  </DialogTitle>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">User</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <Combobox value={userSelected}
-                          onChange={(user: IUserItem | null) => {
-                            if (!user) {
-                              return;
-                            }
-                            setUserSelected(user);
-                          }}>
-                          <div className="relative mt-1">
-                            <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                              <ComboboxInput
-                                id="namespace"
-                                className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                displayValue={(user: IUserItem) => user.username}
-                                onChange={event => {
-                                  setUserSearch(event.target.value);
-                                }}
-                              />
-                              <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2">
-                                <ChevronUpDownIcon
-                                  className="h-5 w-5 text-gray-400"
-                                  aria-hidden="true"
-                                />
-                              </ComboboxButton>
-                            </div>
-                            <Transition
-                              as={Fragment}
-                              leave="transition ease-in duration-100"
-                              leaveFrom="opacity-100"
-                              leaveTo="opacity-0"
-                              afterLeave={() => setUserSearch('')}
-                            >
-                              <ComboboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                                {
-                                  userList?.length === 0 ? (
-                                    <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                      Nothing found.
-                                    </div>
-                                  ) : (
-                                    userList?.map(user => (
-                                      <ComboboxOption
-                                        key={user.id}
-                                        className={`relative cursor-pointer select-none`}
-                                        value={user}
-                                      >
-                                        {({ focus, selected }) => (
-                                          <span className={`block truncate font-normal py-2 px-4 ${focus ? 'bg-gray-200 text-gray-800' : 'text-gray-900'}`}
-                                          >
-                                            {user.username}
-                                          </span>
-                                        )}
-                                      </ComboboxOption>
-                                    ))
-                                  )
-                                }
-                              </ComboboxOptions>
-                            </Transition>
-                          </div>
-                        </Combobox>
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4">
-                      <div className="col-span-2"></div>
-                      <div className="col-span-4">
-                        {
-                          userSelectedValid ? null : (
-                            <p className="mt-1 text-xs text-red-600">
-                              <span>
-                                Please select a user.
-                              </span>
-                            </p>
-                          )
-                        }
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-6 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">Role</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4">
-                        <Listbox
-                          value={addNamespaceRoleRole}
-                          onChange={(source: string) => {
-                            setAddNamespaceRoleRole(source);
-                          }}>
-                          <div className="relative w-full">
-                            <ListboxButton
-                              className={() => {
-                                let cursor = ''
-                                if ((searchParams.get('code_repository_stick') || '') === 'true') {
-                                  cursor = 'cursor-not-allowed ';
-                                } else {
-                                  cursor = 'cursor-pointer ';
-                                }
-                                return cursor + "relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-                              }}
-                            >
-                              <span className="block truncate">{addNamespaceRoleRole}</span>
-                              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                <ChevronUpDownIcon
-                                  className="h-5 w-5 text-gray-400"
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            </ListboxButton>
-                            <ListboxOptions
-                              className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10"
-                            >
-                              {
-                                namespaceRoles.map(source => (
-                                  <ListboxOption key={source.name} value={source.name} className={({ active }) =>
-                                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                    }`
-                                  }>
-                                    {({ selected }) => (
-                                      <>
-                                        <span
-                                          className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                            }`}
-                                        >
-                                          {source.name}
-                                        </span>
-                                        {
-                                          selected ? (
-                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                            </span>
-                                          ) : null
-                                        }
-                                      </>
-                                    )}
-                                  </ListboxOption>
-                                ))
-                              }
-                            </ListboxOptions>
-                          </div>
-                        </Listbox>
-                      </div>
-                    </div>
-                    <div className="flex flex-row-reverse mt-5">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => addMember()}
-                      >
-                        Add
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setCreateUserNamespaceModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
+      <Dialog open={createUserNamespaceModal} onOpenChange={setCreateUserNamespaceModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Add member</DialogTitle>
+          <div className="flex flex-col gap-0 mt-4">
+            <div className="grid grid-cols-6 gap-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="text-red-600">*</span>
+                    <span className="leading-6 ">User</span>
+                    <span>:</span>
                   </div>
-                </DialogPanel>
-              </TransitionChild>
+                </label>
+              </div>
+              <div className="col-span-4">
+                <Popover>
+                  <PopoverTrigger
+                    render={
+                      <Button variant="outline" className="w-full justify-between font-normal">
+                        {userSelected?.username || "Select user"}
+                        <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                      </Button>
+                    }
+                  />
+                  <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                    <Command shouldFilter={false}>
+                      <CommandInput
+                        placeholder="Search user"
+                        value={userSearch}
+                        onValueChange={setUserSearch}
+                      />
+                      <CommandList>
+                        <CommandEmpty>Nothing found.</CommandEmpty>
+                        <CommandGroup>
+                          {userList?.map(user => (
+                            <CommandItem
+                              key={user.id}
+                              value={user.username}
+                              onSelect={() => setUserSelected(user)}
+                            >
+                              {user.username}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+            <div className="grid grid-cols-6 gap-4">
+              <div className="col-span-2"></div>
+              <div className="col-span-4">
+                {
+                  userSelectedValid ? null : (
+                    <p className="mt-1 text-xs text-red-600">
+                      <span>
+                        Please select a user.
+                      </span>
+                    </p>
+                  )
+                }
+              </div>
+            </div>
+            <div className="grid grid-cols-6 gap-4 mt-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="text-red-600">*</span>
+                    <span className="leading-6 ">Role</span>
+                    <span>:</span>
+                  </div>
+                </label>
+              </div>
+              <div className="col-span-4">
+                <Select
+                  value={addNamespaceRoleRole}
+                  onValueChange={(source) => { if (source) setAddNamespaceRoleRole(source); }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {namespaceRoles.map(source => (
+                      <SelectItem key={source.name} value={source.name}>
+                        {source.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
           </div>
-        </Dialog>
-      </Transition>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateUserNamespaceModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => addMember()}>Add</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Fragment >
   );
 }
@@ -547,254 +462,127 @@ function TableItem({ localServer, index, namespace, userSelectedArg, member, set
       <td className="pr-3 whitespace-nowrap" onClick={e => {
         e.stopPropagation();
       }}>
-        <Menu as="div" className="relative flex-none" onClick={e => {
-          e.stopPropagation();
-        }}>
-          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-            <span className="sr-only">Open options</span>
-            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <MenuItems className={(index > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-20 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-              <MenuItem>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-100' : '') +
-                      ' block px-3 py-1 text-sm leading-6 text-gray-900 cursor-pointer'
-                    }
-                    onClick={e => setUpdateUserNamespaceModal(true)}
-                  >
-                    Update
-                  </div>
-                )}
-              </MenuItem>
-              <MenuItem>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-50' : '') + ' block px-3 py-1 text-sm leading-6 text-gray-900 hover:text-white hover:bg-red-600 cursor-pointer'
-                    }
-                    onClick={e => deleteMember()}
-                  >
-                    Delete
-                  </div>
-                )}
-              </MenuItem>
-            </MenuItems>
-          </Transition>
-        </Menu>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                <span className="sr-only">Open options</span>
+                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end" className="w-28">
+            <DropdownMenuItem onClick={() => setUpdateUserNamespaceModal(true)}>
+              Update
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onClick={() => deleteMember()}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </td>
       <td className="absolute hidden" onClick={e => { e.preventDefault() }}>
-        <Transition show={updateUserNamespaceModal} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setUpdateUserNamespaceModal}>
-            <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </TransitionChild>
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <TransitionChild
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <DialogPanel className="relative transform rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                    <DialogTitle
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                    >
-                      Update member
-                    </DialogTitle>
-                    <div className="flex flex-col gap-0 mt-4">
-                      {/* <div className="grid grid-cols-6 gap-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="text-red-600">*</span>
-                              <span className="leading-6 ">User</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-4">
-                          <Combobox value={userSelected}
-                            onChange={(user: IUserItem) => {
-                              setUserSelected(user);
-                            }}>
-                            <div className="relative mt-1">
-                              <div className="w-full relative cursor-default overflow-hidden rounded-lg bg-white text-left shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-                                <Combobox.Input
-                                  id="namespace"
-                                  className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
-                                  displayValue={(user: IUserItem) => user.username}
-                                  onChange={event => {
-                                    setUserSearch(event.target.value);
-                                  }}
-                                />
-                                <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                                  <ChevronUpDownIcon
-                                    className="h-5 w-5 text-gray-400"
-                                    aria-hidden="true"
-                                  />
-                                </Combobox.Button>
-                              </div>
-                              <Transition
-                                as={Fragment}
-                                leave="transition ease-in duration-100"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                                afterLeave={() => setUserSearch('')}
-                              >
-                                <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-                                  {
-                                    userList.length === 0 ? (
-                                      <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
-                                        Nothing found.
-                                      </div>
-                                    ) : (
-                                      userList.map(user => (
-                                        <Combobox.Option
-                                          key={user.id}
-                                          className={({ active }) =>
-                                            `relative cursor-pointer select-none py-2 pl-4 pr-4 ${active ? 'bg-gray-200 text-gray-800' : 'text-gray-900'
-                                            }`
-                                          }
-                                          value={user}
-                                        >
-                                          <span className={`block truncate font-normal`}>
-                                            {user.username}
-                                          </span>
-                                        </Combobox.Option>
-                                      ))
-                                    )
-                                  }
-                                </Combobox.Options>
-                              </Transition>
-                            </div>
-                          </Combobox>
-                        </div>
-                      </div> */}
-                      {/* <div className="grid grid-cols-6 gap-4">
-                        <div className="col-span-2"></div>
-                        <div className="col-span-4">
-                          {
-                            userSelectedValid ? null : (
-                              <p className="mt-1 text-xs text-red-600">
-                                <span>
-                                  Please select a user.
-                                </span>
-                              </p>
-                            )
-                          }
-                        </div>
-                      </div> */}
-                      <div className="grid grid-cols-6 gap-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="text-red-600">*</span>
-                              <span className="leading-6 ">Role</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-4">
-                          <Listbox
-                            value={addNamespaceRoleRole}
-                            onChange={(source: string) => {
-                              setAddNamespaceRoleRole(source);
-                            }}>
-                            <div className="relative w-full">
-                              <ListboxButton
-                                className={() => {
-                                  let cursor = 'cursor-pointer '
-                                  return cursor + "relative w-full rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm min-w-[200px]"
-                                }}
-                              >
-                                <span className="block truncate">{addNamespaceRoleRole}</span>
-                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                  <ChevronUpDownIcon
-                                    className="h-5 w-5 text-gray-400"
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              </ListboxButton>
-                              <ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-10">
-
-                                {
-                                  namespaceRoles.map(source => (
-                                    <ListboxOption key={source.name} value={source.name} className={({ active }) =>
-                                      `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-900'
-                                      }`
-                                    }>
-                                      {({ selected }) => (
-                                        <>
-                                          <span
-                                            className={`block truncate ${selected ? 'font-medium' : 'font-normal'
-                                              }`}
-                                          >
-                                            {source.name}
-                                          </span>
-                                          {
-                                            selected ? (
-                                              <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
-                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                              </span>
-                                            ) : null
-                                          }
-                                        </>
-                                      )}
-                                    </ListboxOption>
-                                  ))
-                                }
-                              </ListboxOptions>
-                            </div>
-                          </Listbox>
-                        </div>
-                      </div>
-                      <div className="flex flex-row-reverse mt-5">
-                        <button
-                          type="button"
-                          className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                          onClick={e => updateMember()}
-                        >
-                          Update
-                        </button>
-                        <button
-                          type="button"
-                          className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                          onClick={e => { setUpdateUserNamespaceModal(false) }}
-                        >
-                          Cancel
-                        </button>
-                      </div>
+        <Dialog open={updateUserNamespaceModal} onOpenChange={setUpdateUserNamespaceModal}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogTitle className="border-b pb-4">Update member</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              {/* <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">User</span>
+                      <span>:</span>
                     </div>
-                  </DialogPanel>
-                </TransitionChild>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <Popover>
+                    <PopoverTrigger
+                      render={
+                        <Button variant="outline" className="w-full justify-between font-normal">
+                          {userSelected?.username || "Select user"}
+                          <ChevronUpDownIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+                        </Button>
+                      }
+                    />
+                    <PopoverContent align="start" className="w-(--anchor-width) p-0">
+                      <Command shouldFilter={false}>
+                        <CommandInput
+                          placeholder="Search user"
+                          value={userSearch}
+                          onValueChange={setUserSearch}
+                        />
+                        <CommandList>
+                          <CommandEmpty>Nothing found.</CommandEmpty>
+                          <CommandGroup>
+                            {userList?.map(user => (
+                              <CommandItem
+                                key={user.id}
+                                value={user.username}
+                                onSelect={() => setUserSelected(user)}
+                              >
+                                {user.username}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </div> */}
+              {/* <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2"></div>
+                <div className="col-span-4">
+                  {
+                    userSelectedValid ? null : (
+                      <p className="mt-1 text-xs text-red-600">
+                        <span>
+                          Please select a user.
+                        </span>
+                      </p>
+                    )
+                  }
+                </div>
+              </div> */}
+              <div className="grid grid-cols-6 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">Role</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4">
+                  <Select
+                    value={addNamespaceRoleRole}
+                    onValueChange={(source) => { if (source) setAddNamespaceRoleRole(source); }}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {namespaceRoles.map(source => (
+                        <SelectItem key={source.name} value={source.name}>
+                          {source.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             </div>
-          </Dialog>
-        </Transition>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setUpdateUserNamespaceModal(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => updateMember()}>Update</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </td>
     </tr>
   )
diff --git a/web/src/pages/Repository/index.tsx b/web/src/pages/Repository/index.tsx
index 7b7f02a8..36ceeb30 100644
--- a/web/src/pages/Repository/index.tsx
+++ b/web/src/pages/Repository/index.tsx
@@ -199,7 +199,7 @@ export default function ({ localServer }: { localServer: string }) {
                 </Tabs>
               }
             />
-            <div className="pt-3 pb-3 flex justify-between items-center min-h-[60px]">
+            <div className="pt-3 pb-3 flex justify-between items-center min-h-15">
               <div className="px-4">
                 <div className="relative flex items-center">
                   <Label htmlFor="repositorySearch" className="absolute -top-2 left-2 inline-block bg-background px-1 text-xs font-medium text-foreground z-10">
diff --git a/web/src/pages/Setting/Users.tsx b/web/src/pages/Setting/Users.tsx
index 6dd92770..e07c5ccc 100644
--- a/web/src/pages/Setting/Users.tsx
+++ b/web/src/pages/Setting/Users.tsx
@@ -18,7 +18,6 @@ import axios from "axios";
 import dayjs from "dayjs";
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Link, useParams } from 'react-router-dom';
 
 import Header from "../../components/Header";
 import Menu from "../../components/Menu";
diff --git a/web/src/pages/Tag/index.tsx b/web/src/pages/Tag/index.tsx
index 8f02514c..f2565a3d 100644
--- a/web/src/pages/Tag/index.tsx
+++ b/web/src/pages/Tag/index.tsx
@@ -1,4 +1,3 @@
-import { Dialog, DialogTitle, Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
 /**
  * Copyright 2023 sigma
  *
@@ -33,6 +32,21 @@ import Settings from "../../Settings";
 import Toast from "../../components/Notification";
 import distros, { distroName } from '../../utils/distros';
 import { useTranslation } from "../../i18n/useTranslation";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   IArtifact,
   IEndpoint,
@@ -46,7 +60,6 @@ import {
   IUserSelf,
   IVuln
 } from "../../interfaces";
-import { NamespaceRole, UserRole } from "../../interfaces/enums";
 import { Tooltip, trimHTTP } from "../../utils";
 
 export default function Tag({ localServer }: { localServer: string }) {
@@ -258,69 +271,36 @@ export default function Tag({ localServer }: { localServer: string }) {
             </div>
           </main>
           <div className="flex-1 overflow-y-auto">
-            <Transition.Root show={deleteTagModal} as={Fragment}>
-              <Dialog as="div" className="relative z-10" onClose={setDeleteTagModal}>
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-                </Transition.Child>
-
-                <div className="fixed inset-0 z-10 overflow-y-auto">
-                  <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                    <Transition.Child
-                      as={Fragment}
-                      enter="ease-out duration-300"
-                      enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                      enterTo="opacity-100 translate-y-0 sm:scale-100"
-                      leave="ease-in duration-200"
-                      leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                      leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    >
-                      <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                        <div className="sm:flex sm:items-start">
-                          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                            <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                          </div>
-                          <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                            <DialogTitle as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                              Delete tag
-                            </DialogTitle>
-                            <div className="mt-2">
-                              <p className="text-sm text-gray-500">
-                                Are you sure you want to delete the tag <span className="text-black font-medium">{deleteTagModalTag.name}</span>
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                          <button
-                            type="button"
-                            className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                            onClick={e => { setDeleteTagModal(false); deleteTag(deleteTagModalTag.id); }}
-                          >
-                            Delete
-                          </button>
-                          <button
-                            type="button"
-                            className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                            onClick={() => setDeleteTagModal(false)}
-                          >
-                            Cancel
-                          </button>
-                        </div>
-                      </Dialog.Panel>
-                    </Transition.Child>
+            <Dialog open={deleteTagModal} onOpenChange={setDeleteTagModal}>
+              <DialogContent className="sm:max-w-lg">
+                <div className="flex items-start gap-4">
+                  <div className="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0">
+                    <ExclamationTriangleIcon className="size-6 text-red-600" aria-hidden="true" />
+                  </div>
+                  <div className="text-center sm:text-left">
+                    <DialogTitle>Delete tag</DialogTitle>
+                    <DialogDescription className="mt-2">
+                      Are you sure you want to delete the tag{' '}
+                      <span className="text-foreground font-medium">{deleteTagModalTag.name}</span>
+                    </DialogDescription>
                   </div>
                 </div>
-              </Dialog>
-            </Transition.Root>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setDeleteTagModal(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => { setDeleteTagModal(false); deleteTag(deleteTagModalTag.id); }}
+                  >
+                    Delete
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
             <div className="flex flex-col border-b border-gray-200">
               {
                 tagList.items?.map((tag, index) => {
@@ -369,43 +349,27 @@ export default function Tag({ localServer }: { localServer: string }) {
                           </code>
                         </div>
                         <div className="flex flex-col justify-center">
-                          <Menu as="div" className="relative flex-none" onClick={e => {
-                            e.stopPropagation();
-                          }}>
-                            <MenuButton className="mx-auto my-auto block p-1 text-gray-500 hover:text-gray-900 margin">
-                              <span className="sr-only">Open options</span>
-                              <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-                            </MenuButton>
-                            <Transition
-                              as={Fragment}
-                              enter="transition ease-out duration-100"
-                              enterFrom="transform opacity-0 scale-95"
-                              enterTo="transform opacity-100 scale-100"
-                              leave="transition ease-in duration-75"
-                              leaveFrom="transform opacity-100 scale-100"
-                              leaveTo="transform opacity-0 scale-95"
-                            >
-                              <MenuItems className={(index > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-20 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-                                <MenuItem>
-                                  {({ active }) => (
-                                    <div
-                                      className={
-                                        (active ? 'bg-gray-50' : '') +
-                                        (((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) ? ' cursor-pointer' : ' cursor-not-allowed') +
-                                        ' block px-3 py-1 text-sm leading-6 text-gray-900 hover:text-white hover:bg-red-600 cursor-pointer'
-                                      }
-                                      onClick={e => {
-                                        setDeleteTagModal(true);
-                                        setDeleteTagModalTag(tag);
-                                      }}
-                                    >
-                                      Delete
-                                    </div>
-                                  )}
-                                </MenuItem>
-                              </MenuItems>
-                            </Transition>
-                          </Menu>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger
+                              render={
+                                <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                                  <span className="sr-only">Open options</span>
+                                  <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+                                </Button>
+                              }
+                            />
+                            <DropdownMenuContent align="end" className="w-20">
+                              <DropdownMenuItem
+                                variant="destructive"
+                                onClick={() => {
+                                  setDeleteTagModal(true);
+                                  setDeleteTagModalTag(tag);
+                                }}
+                              >
+                                Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
                         </div>
                       </div>
                       {/* first row end */}
@@ -520,15 +484,15 @@ function DetailItem({ artifact }: { artifact: IArtifact }) {
   let imageConfigObj = JSON.parse(artifact.config_raw) as IImageConfig;
   return (
     <tr className="hover:bg-gray-50 cursor-pointer">
-      <td className="text-left w-[180px]">
+      <td className="text-left w-45">
         <code className="text-xs underline underline-offset-1 text-blue-600 hover:text-blue-500">
           {cutDigest(artifact.digest)}
         </code>
       </td>
-      <td className="text-left text-xs w-[180px] capitalize">
+      <td className="text-left text-xs w-45 capitalize">
         {artifact.type}
       </td>
-      <td className="text-left text-xs w-[180px]">
+      <td className="text-left text-xs w-45">
         <div className='flex gap-1'>
           {distros(sbomObj.distro?.name) === "" ? "" : (
             <img src={"/distros/" + distros(sbomObj.distro.name)} alt={sbomObj.distro.name} className="w-4 h-4 inline relative" />
@@ -538,7 +502,7 @@ function DetailItem({ artifact }: { artifact: IArtifact }) {
           </div>
         </div>
       </td>
-      <td className="text-left text-xs w-[180px]">
+      <td className="text-left text-xs w-45">
         {
           imageConfigObj.os === undefined ||
             imageConfigObj.architecture === undefined ||
@@ -548,22 +512,22 @@ function DetailItem({ artifact }: { artifact: IArtifact }) {
           )
         }
       </td>
-      <td className="text-left text-xs w-[180px]">
+      <td className="text-left text-xs w-45">
         Verified
       </td>
-      <td className="text-left text-xs w-[180px]">
+      <td className="text-left text-xs w-45">
         {(artifact.pull_times || 0) > 0 ? dayjs().to(dayjs(artifact.last_pull)) : "Never pulled"}
       </td>
-      {/* <td className="text-right text-xs w-[180px]">
+      {/* <td className="text-right text-xs w-45">
         {artifact.pull_times}
       </td> */}
-      <td className="text-right text-xs w-[220px]">
+      <td className="text-right text-xs w-55">
         <span className="bg-red-800 text-white text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300"><span>{vulnerabilityObj.critical || 0}</span> C</span>
         <span className="bg-red-300 text-gray-800 text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.high || 0} H</span>
         <span className="bg-amber-400 text-gray-800 text-xs font-medium mr-1 px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.medium || 0} M</span>
         <span className="bg-amber-200 text-gray-800 text-xs font-medium px-2 py-0.5 dark:bg-red-900 dark:text-red-300">{vulnerabilityObj.low || 0} L</span>
       </td>
-      <td className="text-right text-xs w-[180px]">
+      <td className="text-right text-xs w-45">
         {humanFormat(artifact.blob_size || 0)}
       </td>
     </tr>
diff --git a/web/src/pages/Webhook/List.tsx b/web/src/pages/Webhook/List.tsx
index 00e6c386..bcfcc2e8 100644
--- a/web/src/pages/Webhook/List.tsx
+++ b/web/src/pages/Webhook/List.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Menu, Transition } from "@headlessui/react";
 /**
  * Copyright 2023 sigma
  *
@@ -16,7 +15,8 @@ import { Dialog, Menu, Transition } from "@headlessui/react";
  */
 
 import axios from "axios";
-import { Dialog as ShadDialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "@/components/ui/dialog";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
@@ -31,7 +31,6 @@ import Pagination from "../../components/Pagination";
 import Settings from "../../Settings";
 import { IHTTPError, INamespaceItem, IOrder, IUserSelf, IWebhookItem, IWebhookList } from "../../interfaces";
 import OrderHeader from "../../components/OrderHeader";
-import { EllipsisVertical, TriangleAlert } from "lucide-react";
 import { EllipsisVerticalIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { NamespaceRole, UserRole } from "../../interfaces/enums";
 import { useTranslation } from "../../i18n/useTranslation";
@@ -226,7 +225,7 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-webhook-retry-duration"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[220px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-55">
         Less than 10, unit is second.
       </div>
       <div className="min-h-screen flex overflow-hidden bg-white dark:bg-gray-950">
@@ -269,7 +268,7 @@ export default function ({ localServer }: { localServer: string }) {
                 </div>
               )
             } />
-            <div className="pt-1 pb-1 flex justify-between items-center min-h-[60px]">
+            <div className="pt-1 pb-1 flex justify-between items-center min-h-15">
               <div className="px-4">
                 <div className="flex gap-4">
                   <div className="relative mt-2 flex items-center">
@@ -333,247 +332,204 @@ export default function ({ localServer }: { localServer: string }) {
           <Pagination limit={Settings.PageSize} page={page} setPage={setPage} total={total} />
         </div>
       </div>
-      <Transition.Root show={createWebhookModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setCreateWebhookModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                  >
-                    Create webhook
-                  </Dialog.Title>
-                  <div className="flex flex-col gap-0 mt-4">
-                    <div className="grid grid-cols-12 gap-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="text-red-600">*</span>
-                            <span className="leading-6 ">URL</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-10">
-                        <input
-                          type="text"
-                          name="description"
-                          placeholder="128 characters"
-                          className={(urlValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                          value={url}
-                          onChange={e => setUrl(e.target.value)}
-                        />
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-12 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="leading-6 ">Secret</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-10">
-                        <input
-                          type="text"
-                          name="description"
-                          placeholder="max 63 characters"
-                          className={(secretValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                          value={secret}
-                          onChange={e => setSecret(e.target.value)}
-                        />
-                      </div>
-                    </div>
-                    {
-                      showSslVerify ? (
-                        <div className="grid grid-cols-12 gap-4 mt-4">
-                          <div className="col-span-2 flex flex-row">
-                            <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                              <div className="flex">
-                                <span className="leading-6 ">SSL Verify</span>
-                                <span>:</span>
-                              </div>
-                            </label>
-                          </div>
-                          <div className="col-span-10 flex flex-row">
-                            <label className="inline-flex items-center cursor-pointer">
-                              <input type="checkbox"
-                                checked={sslVerify}
-                                onChange={e => setSslVerify(!sslVerify)}
-                                className="sr-only peer" />
-                              <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                            </label>
-                          </div>
-                        </div>
-                      ) : null
-                    }
-                    <div className="grid grid-cols-12 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="leading-6 ">Retry Times</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4 flex flex-row">
-                        <input
-                          type="text"
-                          name="description"
-                          placeholder="1 <= times <= 5"
-                          className={(retryTimesValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                          value={retryTimes}
-                          onChange={e => setRetryTimes(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                        />
-                      </div>
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="leading-6 ">Retry Duration</span>
-                            <div className="flex flex-row cursor-pointer"
-                              id="gcRepositoryRetentionDaysHelp"
-                              onClick={e => {
-                                let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
-                                  document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
-                                tooltip.show();
-                              }}
-                            >
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                              </svg>
-                            </div>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-4 flex flex-row">
-                        <input
-                          type="text"
-                          name="description"
-                          placeholder="less than 10"
-                          className={(retryDurationValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                          value={retryDuration}
-                          onChange={e => setRetryDuration(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                        />
-                      </div>
-                    </div>
-                    <div className="grid grid-cols-12 gap-4 mt-4">
-                      <div className="col-span-2 flex flex-row">
-                        <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                          <div className="flex">
-                            <span className="leading-6 ">Enable</span>
-                            <span>:</span>
-                          </div>
-                        </label>
-                      </div>
-                      <div className="col-span-10 flex flex-row">
-                        <label className="inline-flex items-center cursor-pointer">
-                          <input type="checkbox"
-                            checked={enable}
-                            onChange={e => setEnable(!enable)}
-                            className="sr-only peer" />
-                          <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                        </label>
-                      </div>
-                    </div>
-                    <div className="mt-4 flex flex-row gap-4">
-                      {
-                        location.pathname.startsWith("/settings") ? (
-                          <div className="flex items-center">
-                            <input id="event-namespace" type="checkbox"
-                              checked={eventNamespace}
-                              onChange={e => setEventNamespace(!eventNamespace)}
-                              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                            <label htmlFor="event-namespace" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Namespace Event</label>
-                          </div>
-                        ) : null
-                      }
-                      <div className="flex items-center">
-                        <input id="event-member"
-                          checked={eventMember}
-                          onChange={e => setEventMember(!eventMember)}
-                          type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                        <label htmlFor="event-member" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Member Event</label>
-                      </div>
-                      <div className="flex items-center">
-                        <input id="event-repository" type="checkbox"
-                          checked={eventRepository}
-                          onChange={e => setEventRepository(!eventRepository)}
-                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                        <label htmlFor="event-repository" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Repository Event</label>
-                      </div>
-                      <div className="flex items-center">
-                        <input id="event-tag" type="checkbox"
-                          checked={eventTag}
-                          onChange={e => setEventTag(!eventTag)}
-                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                        <label htmlFor="event-tag" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Tag Event</label>
-                      </div>
-                      <div className="flex items-center">
-                        <input id="event-artifact" type="checkbox"
-                          checked={eventArtifact}
-                          onChange={e => setEventArtifact(!eventArtifact)}
-                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                        <label htmlFor="event-artifact" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Artifact Event</label>
-                      </div>
-                      <div className="flex items-center">
-                        <input id="event-daemon-task-gc" type="checkbox"
-                          checked={eventDaemonTaskGc}
-                          onChange={e => setEventDaemonTaskGc(!eventDaemonTaskGc)}
-                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                        <label htmlFor="event-daemon-task-gc" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Gc Event</label>
-                      </div>
-                    </div>
-                    <div className="flex flex-row-reverse mt-4 pt-4 border-t">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={e => createWebhook()}
-                      >
-                        Create
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                        onClick={e => { setCreateWebhookModal(false) }}
-                      >
-                        Cancel
-                      </button>
-                    </div>
+      <Dialog open={createWebhookModal} onOpenChange={setCreateWebhookModal}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogTitle className="border-b pb-4">Create webhook</DialogTitle>
+          <div className="flex flex-col gap-0 mt-4">
+            <div className="grid grid-cols-12 gap-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="text-red-600">*</span>
+                    <span className="leading-6 ">URL</span>
+                    <span>:</span>
                   </div>
-                </Dialog.Panel>
-              </Transition.Child>
+                </label>
+              </div>
+              <div className="col-span-10">
+                <input
+                  type="text"
+                  name="description"
+                  placeholder="128 characters"
+                  className={(urlValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                  value={url}
+                  onChange={e => setUrl(e.target.value)}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-12 gap-4 mt-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="leading-6 ">Secret</span>
+                    <span>:</span>
+                  </div>
+                </label>
+              </div>
+              <div className="col-span-10">
+                <input
+                  type="text"
+                  name="description"
+                  placeholder="max 63 characters"
+                  className={(secretValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                  value={secret}
+                  onChange={e => setSecret(e.target.value)}
+                />
+              </div>
+            </div>
+            {
+              showSslVerify ? (
+                <div className="grid grid-cols-12 gap-4 mt-4">
+                  <div className="col-span-2 flex flex-row">
+                    <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                      <div className="flex">
+                        <span className="leading-6 ">SSL Verify</span>
+                        <span>:</span>
+                      </div>
+                    </label>
+                  </div>
+                  <div className="col-span-10 flex flex-row">
+                    <label className="inline-flex items-center cursor-pointer">
+                      <input type="checkbox"
+                        checked={sslVerify}
+                        onChange={e => setSslVerify(!sslVerify)}
+                        className="sr-only peer" />
+                      <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              ) : null
+            }
+            <div className="grid grid-cols-12 gap-4 mt-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="leading-6 ">Retry Times</span>
+                    <span>:</span>
+                  </div>
+                </label>
+              </div>
+              <div className="col-span-4 flex flex-row">
+                <input
+                  type="text"
+                  name="description"
+                  placeholder="1 <= times <= 5"
+                  className={(retryTimesValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                  value={retryTimes}
+                  onChange={e => setRetryTimes(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                />
+              </div>
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="leading-6 ">Retry Duration</span>
+                    <div className="flex flex-row cursor-pointer"
+                      id="gcRepositoryRetentionDaysHelp"
+                      onClick={e => {
+                        let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
+                          document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
+                        tooltip.show();
+                      }}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                      </svg>
+                    </div>
+                    <span>:</span>
+                  </div>
+                </label>
+              </div>
+              <div className="col-span-4 flex flex-row">
+                <input
+                  type="text"
+                  name="description"
+                  placeholder="less than 10"
+                  className={(retryDurationValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                  value={retryDuration}
+                  onChange={e => setRetryDuration(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-12 gap-4 mt-4">
+              <div className="col-span-2 flex flex-row">
+                <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                  <div className="flex">
+                    <span className="leading-6 ">Enable</span>
+                    <span>:</span>
+                  </div>
+                </label>
+              </div>
+              <div className="col-span-10 flex flex-row">
+                <label className="inline-flex items-center cursor-pointer">
+                  <input type="checkbox"
+                    checked={enable}
+                    onChange={e => setEnable(!enable)}
+                    className="sr-only peer" />
+                  <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                </label>
+              </div>
+            </div>
+            <div className="mt-4 flex flex-row gap-4">
+              {
+                location.pathname.startsWith("/settings") ? (
+                  <div className="flex items-center">
+                    <input id="event-namespace" type="checkbox"
+                      checked={eventNamespace}
+                      onChange={e => setEventNamespace(!eventNamespace)}
+                      className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                    <label htmlFor="event-namespace" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Namespace Event</label>
+                  </div>
+                ) : null
+              }
+              <div className="flex items-center">
+                <input id="event-member"
+                  checked={eventMember}
+                  onChange={e => setEventMember(!eventMember)}
+                  type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                <label htmlFor="event-member" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Member Event</label>
+              </div>
+              <div className="flex items-center">
+                <input id="event-repository" type="checkbox"
+                  checked={eventRepository}
+                  onChange={e => setEventRepository(!eventRepository)}
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                <label htmlFor="event-repository" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Repository Event</label>
+              </div>
+              <div className="flex items-center">
+                <input id="event-tag" type="checkbox"
+                  checked={eventTag}
+                  onChange={e => setEventTag(!eventTag)}
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                <label htmlFor="event-tag" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Tag Event</label>
+              </div>
+              <div className="flex items-center">
+                <input id="event-artifact" type="checkbox"
+                  checked={eventArtifact}
+                  onChange={e => setEventArtifact(!eventArtifact)}
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                <label htmlFor="event-artifact" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Artifact Event</label>
+              </div>
+              <div className="flex items-center">
+                <input id="event-daemon-task-gc" type="checkbox"
+                  checked={eventDaemonTaskGc}
+                  onChange={e => setEventDaemonTaskGc(!eventDaemonTaskGc)}
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                <label htmlFor="event-daemon-task-gc" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Gc Event</label>
+              </div>
             </div>
           </div>
-        </Dialog>
-      </Transition.Root>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateWebhookModal(false)}>Cancel</Button>
+            <Button onClick={() => createWebhook()}>Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Fragment >
   )
 }
 
 function TableItem({ localServer, index, userObj, namespaceObj, webhookObj, setRefresh }: { localServer: string, index: number, userObj: IUserSelf, namespaceObj: INamespaceItem, webhookObj: IWebhookItem, setRefresh: (param: any) => void }) {
+  const canManageWebhook = userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager));
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -706,350 +662,233 @@ function TableItem({ localServer, index, userObj, namespaceObj, webhookObj, setR
       <td className="pr-3 whitespace-nowrap text-center" onClick={e => {
         e.stopPropagation();
       }}>
-        <Menu as="div" className="relative flex-none" onClick={e => {
-          e.stopPropagation();
-        }}>
-          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-            <span className="sr-only">Open options</span>
-            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className={(index > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-20 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-100' : '') +
-                      (((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) ? ' cursor-pointer' : ' cursor-not-allowed') +
-                      ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                    }
-                    onClick={e => {
-                      ((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) && setUpdateWebhookModal(true);
-                    }}
-                  >
-                    Update
-                  </div>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-50' : '') +
-                      (((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) ? ' cursor-pointer' : ' cursor-not-allowed') +
-                      ' block px-3 py-1 text-sm leading-6 text-gray-900 hover:text-white hover:bg-red-600 cursor-pointer'
-                    }
-                    onClick={e => {
-                      ((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) && setDeleteWebhookModal(true);
-                    }}
-                  >
-                    Delete
-                  </div>
-                )}
-              </Menu.Item>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                <span className="sr-only">Open options</span>
+                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end" className="w-28">
+            <DropdownMenuItem disabled={!canManageWebhook} onClick={() => setUpdateWebhookModal(true)}>
+              Update
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" disabled={!canManageWebhook} onClick={() => setDeleteWebhookModal(true)}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </td>
       <td className="absolute hidden" onClick={e => { e.preventDefault() }}>
-        <Transition.Root show={updateWebhookModal} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setUpdateWebhookModal}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform rounded-lg bg-white px-6 pb-4 text-left shadow-xl transition-all">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900 border-b pt-4 pb-4"
-                    >
-                      Create webhook
-                    </Dialog.Title>
-                    <div className="flex flex-col gap-0 mt-4">
-                      <div className="grid grid-cols-12 gap-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="text-red-600">*</span>
-                              <span className="leading-6 ">URL</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-10">
-                          <input
-                            type="text"
-                            name="description"
-                            placeholder="128 characters"
-                            className={(urlValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={url}
-                            onChange={e => setUrl(e.target.value)}
-                          />
-                        </div>
-                      </div>
-                      <div className="grid grid-cols-12 gap-4 mt-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="leading-6 ">Secret</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-10">
-                          <input
-                            type="text"
-                            name="description"
-                            placeholder="max 63 characters"
-                            className={(secretValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={secret}
-                            onChange={e => setSecret(e.target.value)}
-                          />
-                        </div>
-                      </div>
-                      {
-                        showSslVerify ? (
-                          <div className="grid grid-cols-12 gap-4 mt-4">
-                            <div className="col-span-2 flex flex-row">
-                              <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                                <div className="flex">
-                                  <span className="leading-6 ">SSL Verify</span>
-                                  <span>:</span>
-                                </div>
-                              </label>
-                            </div>
-                            <div className="col-span-10 flex flex-row">
-                              <label className="inline-flex items-center cursor-pointer">
-                                <input type="checkbox"
-                                  checked={sslVerify}
-                                  onChange={e => setSslVerify(!sslVerify)}
-                                  className="sr-only peer" />
-                                <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                              </label>
-                            </div>
-                          </div>
-                        ) : null
-                      }
-                      <div className="grid grid-cols-12 gap-4 mt-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="leading-6 ">Retry Times</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-4 flex flex-row">
-                          <input
-                            type="text"
-                            name="description"
-                            placeholder="1 <= times <= 5"
-                            className={(retryTimesValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={retryTimes}
-                            onChange={e => setRetryTimes(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                          />
-                        </div>
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="leading-6 ">Retry Duration</span>
-                              <div className="flex flex-row cursor-pointer"
-                                id="gcRepositoryRetentionDaysHelp"
-                                onClick={e => {
-                                  let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
-                                    document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
-                                  tooltip.show();
-                                }}
-                              >
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                                </svg>
-                              </div>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-4 flex flex-row">
-                          <input
-                            type="text"
-                            name="description"
-                            placeholder="less than 10"
-                            className={(retryDurationValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
-                            value={retryDuration}
-                            onChange={e => setRetryDuration(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
-                          />
-                        </div>
-                      </div>
-                      <div className="grid grid-cols-12 gap-4 mt-4">
-                        <div className="col-span-2 flex flex-row">
-                          <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
-                            <div className="flex">
-                              <span className="leading-6 ">Enable</span>
-                              <span>:</span>
-                            </div>
-                          </label>
-                        </div>
-                        <div className="col-span-10 flex flex-row">
-                          <label className="inline-flex items-center cursor-pointer">
-                            <input type="checkbox"
-                              checked={enable}
-                              onChange={e => setEnable(!enable)}
-                              className="sr-only peer" />
-                            <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                      <div className="mt-4 flex flex-row gap-4">
-                        <div className="flex items-center">
-                          <input id="event-namespace" type="checkbox"
-                            checked={eventNamespace}
-                            onChange={e => setEventNamespace(!eventNamespace)}
-                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                          <label htmlFor="event-namespace" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Namespace Event</label>
-                        </div>
-                        <div className="flex items-center">
-                          <input id="event-repository" type="checkbox"
-                            checked={eventRepository}
-                            onChange={e => setEventRepository(!eventRepository)}
-                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                          <label htmlFor="event-repository" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Repository Event</label>
-                        </div>
-                        <div className="flex items-center">
-                          <input id="event-tag" type="checkbox"
-                            checked={eventTag}
-                            onChange={e => setEventTag(!eventTag)}
-                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                          <label htmlFor="event-tag" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Tag Event</label>
-                        </div>
-                        <div className="flex items-center">
-                          <input id="event-artifact" type="checkbox"
-                            checked={eventArtifact}
-                            onChange={e => setEventArtifact(!eventArtifact)}
-                            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                          <label htmlFor="event-artifact" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Artifact Event</label>
-                        </div>
-                        <div className="flex items-center">
-                          <input id="event-member"
-                            checked={eventMember}
-                            onChange={e => setEventMember(!eventMember)}
-                            type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
-                          <label htmlFor="event-member" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Member Event</label>
-                        </div>
-                      </div>
-                      <div className="flex flex-row-reverse mt-4 pt-4 border-t">
-                        <button
-                          type="button"
-                          className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:bg-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-                          onClick={e => updateWebhook()}
-                        >
-                          Update
-                        </button>
-                        <button
-                          type="button"
-                          className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
-                          onClick={e => { setUpdateWebhookModal(false) }}
-                        >
-                          Cancel
-                        </button>
-                      </div>
+        <Dialog open={updateWebhookModal} onOpenChange={setUpdateWebhookModal}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogTitle className="border-b pb-4">Update webhook</DialogTitle>
+            <div className="flex flex-col gap-0 mt-4">
+              <div className="grid grid-cols-12 gap-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="text-red-600">*</span>
+                      <span className="leading-6 ">URL</span>
+                      <span>:</span>
                     </div>
-                  </Dialog.Panel>
-                </Transition.Child>
+                  </label>
+                </div>
+                <div className="col-span-10">
+                  <input
+                    type="text"
+                    name="description"
+                    placeholder="128 characters"
+                    className={(urlValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                    value={url}
+                    onChange={e => setUrl(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-12 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="leading-6 ">Secret</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-10">
+                  <input
+                    type="text"
+                    name="description"
+                    placeholder="max 63 characters"
+                    className={(secretValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                    value={secret}
+                    onChange={e => setSecret(e.target.value)}
+                  />
+                </div>
+              </div>
+              {
+                showSslVerify ? (
+                  <div className="grid grid-cols-12 gap-4 mt-4">
+                    <div className="col-span-2 flex flex-row">
+                      <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                        <div className="flex">
+                          <span className="leading-6 ">SSL Verify</span>
+                          <span>:</span>
+                        </div>
+                      </label>
+                    </div>
+                    <div className="col-span-10 flex flex-row">
+                      <label className="inline-flex items-center cursor-pointer">
+                        <input type="checkbox"
+                          checked={sslVerify}
+                          onChange={e => setSslVerify(!sslVerify)}
+                          className="sr-only peer" />
+                        <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                      </label>
+                    </div>
+                  </div>
+                ) : null
+              }
+              <div className="grid grid-cols-12 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="leading-6 ">Retry Times</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4 flex flex-row">
+                  <input
+                    type="text"
+                    name="description"
+                    placeholder="1 <= times <= 5"
+                    className={(retryTimesValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                    value={retryTimes}
+                    onChange={e => setRetryTimes(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                  />
+                </div>
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="leading-6 ">Retry Duration</span>
+                      <div className="flex flex-row cursor-pointer"
+                        id="gcRepositoryRetentionDaysHelp"
+                        onClick={e => {
+                          let tooltip = new Tooltip(document.getElementById("tooltip-gc-repository-retention-days"),
+                            document.getElementById("gcRepositoryRetentionDaysHelp"), { triggerType: "click" });
+                          tooltip.show();
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 block my-auto ml-0.5">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                      </div>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-4 flex flex-row">
+                  <input
+                    type="text"
+                    name="description"
+                    placeholder="less than 10"
+                    className={(retryDurationValid ? "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" : "block w-full rounded-md border-0 py-1.5 pr-10 text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6")}
+                    value={retryDuration}
+                    onChange={e => setRetryDuration(Number.isNaN(parseInt(e.target.value)) ? "" : parseInt(e.target.value))}
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-12 gap-4 mt-4">
+                <div className="col-span-2 flex flex-row">
+                  <label htmlFor="usernameText" className="block text-sm font-medium leading-6 text-gray-900 my-auto">
+                    <div className="flex">
+                      <span className="leading-6 ">Enable</span>
+                      <span>:</span>
+                    </div>
+                  </label>
+                </div>
+                <div className="col-span-10 flex flex-row">
+                  <label className="inline-flex items-center cursor-pointer">
+                    <input type="checkbox"
+                      checked={enable}
+                      onChange={e => setEnable(!enable)}
+                      className="sr-only peer" />
+                    <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                  </label>
+                </div>
+              </div>
+              <div className="mt-4 flex flex-row gap-4">
+                <div className="flex items-center">
+                  <input id="event-namespace" type="checkbox"
+                    checked={eventNamespace}
+                    onChange={e => setEventNamespace(!eventNamespace)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                  <label htmlFor="event-namespace" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Namespace Event</label>
+                </div>
+                <div className="flex items-center">
+                  <input id="event-repository" type="checkbox"
+                    checked={eventRepository}
+                    onChange={e => setEventRepository(!eventRepository)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                  <label htmlFor="event-repository" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Repository Event</label>
+                </div>
+                <div className="flex items-center">
+                  <input id="event-tag" type="checkbox"
+                    checked={eventTag}
+                    onChange={e => setEventTag(!eventTag)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                  <label htmlFor="event-tag" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Tag Event</label>
+                </div>
+                <div className="flex items-center">
+                  <input id="event-artifact" type="checkbox"
+                    checked={eventArtifact}
+                    onChange={e => setEventArtifact(!eventArtifact)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                  <label htmlFor="event-artifact" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Artifact Event</label>
+                </div>
+                <div className="flex items-center">
+                  <input id="event-member"
+                    checked={eventMember}
+                    onChange={e => setEventMember(!eventMember)}
+                    type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                  <label htmlFor="event-member" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Member Event</label>
+                </div>
               </div>
             </div>
-          </Dialog>
-        </Transition.Root>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setUpdateWebhookModal(false)}>Cancel</Button>
+              <Button onClick={() => updateWebhook()}>Save</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </td>
       <td className="absolute hidden" onClick={e => { e.preventDefault() }}>
-        <Transition.Root show={deleteWebhookModal} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setDeleteWebhookModal}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 min-w-[600px]">
-                    <div className="sm:flex sm:items-start">
-                      <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                      </div>
-                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                        <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                          Delete webhook
-                        </Dialog.Title>
-                        <div className="mt-2">
-                          <p className="text-sm text-gray-500">
-                            Are you sure you want to delete the webhook <span className="text-black font-medium">{webhookObj.url}</span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                        onClick={e => { setDeleteWebhookModal(false); deleteWebhook(); }}
-                      >
-                        Delete
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                        onClick={() => setDeleteWebhookModal(false)}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
+        <Dialog open={deleteWebhookModal} onOpenChange={setDeleteWebhookModal}>
+          <DialogContent className="sm:max-w-lg">
+            <div className="flex items-start gap-4">
+              <div className="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0">
+                <ExclamationTriangleIcon className="size-6 text-red-600" aria-hidden="true" />
+              </div>
+              <div className="text-center sm:text-left">
+                <DialogTitle>Delete webhook</DialogTitle>
+                <DialogDescription className="mt-2">
+                  Are you sure you want to delete the webhook{" "}
+                  <span className="text-foreground font-medium">{webhookObj.url}</span>
+                </DialogDescription>
               </div>
             </div>
-          </Dialog>
-        </Transition.Root>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDeleteWebhookModal(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={() => { setDeleteWebhookModal(false); deleteWebhook(); }}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </td>
     </tr>
   );
diff --git a/web/src/pages/Webhook/Log.tsx b/web/src/pages/Webhook/Log.tsx
index 7b276c12..83e584b5 100644
--- a/web/src/pages/Webhook/Log.tsx
+++ b/web/src/pages/Webhook/Log.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Menu, Transition } from "@headlessui/react";
 /**
  * Copyright 2024 sigma
  *
@@ -19,7 +18,8 @@ import axios from "axios";
 import dayjs from "dayjs";
 import { Fragment, useEffect, useState } from "react";
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Dialog as ShadDialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "@/components/ui/dialog";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Link, useParams, useSearchParams, useLocation } from 'react-router-dom';
 
@@ -30,7 +30,6 @@ import Pagination from "../../components/Pagination";
 import Settings from "../../Settings";
 import { IHTTPError, INamespaceItem, IOrder, IUserSelf, IWebhookLogItem, IWebhookLogList } from "../../interfaces";
 import OrderHeader from "../../components/OrderHeader";
-import { EllipsisVertical, TriangleAlert } from "lucide-react";
 import { EllipsisVerticalIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { NamespaceRole, UserRole } from "../../interfaces/enums";
 
@@ -157,7 +156,7 @@ export default function ({ localServer }: { localServer: string }) {
       <div
         id="tooltip-webhook-retry-duration"
         role="tooltip"
-        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-[220px]">
+        className="absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700 w-55">
         Less than 10, unit is second.
       </div>
       <div className="min-h-screen flex overflow-hidden bg-white">
@@ -200,7 +199,7 @@ export default function ({ localServer }: { localServer: string }) {
                 </div>
               )
             } />
-            <div className="pt-1 pb-1 flex justify-between items-center min-h-[60px]">
+            <div className="pt-1 pb-1 flex justify-between items-center min-h-15">
               <div className="px-4">
                 <div className="flex gap-4">
                   <div className="relative mt-2 flex items-center">
@@ -264,74 +263,35 @@ export default function ({ localServer }: { localServer: string }) {
           <Pagination limit={Settings.PageSize} page={page} setPage={setPage} total={total} />
         </div>
       </div>
-      <Transition.Root show={webhookPingModal} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setWebhookPingModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 min-w-[600px]">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                        Send webhook ping event
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">
-                          Are you sure you want to send the webhook ping event?
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                    <button
-                      type="button"
-                      className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                      onClick={e => { setWebhookPingModal(false); webhookPing(); }}
-                    >
-                      Send
-                    </button>
-                    <button
-                      type="button"
-                      className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                      onClick={() => setWebhookPingModal(false)}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
+      <Dialog open={webhookPingModal} onOpenChange={setWebhookPingModal}>
+        <DialogContent className="sm:max-w-lg">
+          <div className="flex items-start gap-4">
+            <div className="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0">
+              <ExclamationTriangleIcon className="size-6 text-red-600" aria-hidden="true" />
+            </div>
+            <div className="text-center sm:text-left">
+              <DialogTitle>Send webhook ping event</DialogTitle>
+              <DialogDescription className="mt-2">
+                Are you sure you want to send the webhook ping event?
+              </DialogDescription>
             </div>
           </div>
-        </Dialog>
-      </Transition.Root>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWebhookPingModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => { setWebhookPingModal(false); webhookPing(); }}>
+              Send
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Fragment >
   );
 }
 
 function TableItem({ localServer, index, userObj, namespaceObj, webhookLogObj, setRefresh }: { localServer: string, index: number, userObj: IUserSelf, namespaceObj: INamespaceItem, webhookLogObj: IWebhookLogItem, setRefresh: (param: any) => void }) {
+  const canManageWebhookLog = userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager));
   const [webhookLogResendModal, setWebhookLogResendModal] = useState(false);
   const [webhookLogDeleteModal, setWebhookLogDeleteModal] = useState(false);
 
@@ -395,192 +355,80 @@ function TableItem({ localServer, index, userObj, namespaceObj, webhookLogObj, s
       <td className="pr-3 whitespace-nowrap text-center" onClick={e => {
         e.stopPropagation();
       }}>
-        <Menu as="div" className="relative flex-none" onClick={e => {
-          e.stopPropagation();
-        }}>
-          <Menu.Button className="mx-auto -m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 margin">
-            <span className="sr-only">Open options</span>
-            <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className={(index > 10 ? "menu-action-top" : "mt-2") + " text-left absolute right-0 z-10 w-20 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"} >
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-100' : '') +
-                      (((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) ? ' cursor-pointer' : ' cursor-not-allowed') +
-                      ' block px-3 py-1 text-sm leading-6 text-gray-900'
-                    }
-                    onClick={e => {
-                      ((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) && setWebhookLogResendModal(true);
-                    }}
-                  >
-                    Resend
-                  </div>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    className={
-                      (active ? 'bg-gray-50' : '') +
-                      (((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) ? ' cursor-pointer' : ' cursor-not-allowed') +
-                      ' block px-3 py-1 text-sm leading-6 text-gray-900 hover:text-white hover:bg-red-600 cursor-pointer'
-                    }
-                    onClick={e => {
-                      ((userObj.role == UserRole.Admin || userObj.role == UserRole.Root || (namespaceObj.role != undefined && (namespaceObj.role == NamespaceRole.Admin || namespaceObj.role == NamespaceRole.Manager)))) && setWebhookLogDeleteModal(true);
-                    }}
-                  >
-                    Delete
-                  </div>
-                )}
-              </Menu.Item>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button variant="ghost" size="icon-sm" className="text-gray-500">
+                <span className="sr-only">Open options</span>
+                <EllipsisVerticalIcon className="size-5" aria-hidden="true" />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align="end" className="w-28">
+            <DropdownMenuItem disabled={!canManageWebhookLog} onClick={() => setWebhookLogResendModal(true)}>
+              Resend
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" disabled={!canManageWebhookLog} onClick={() => setWebhookLogDeleteModal(true)}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </td>
       <td className="absolute hidden" onClick={e => { e.preventDefault() }}>
-        <Transition.Root show={webhookLogResendModal} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setWebhookLogResendModal}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                    <div className="sm:flex sm:items-start">
-                      <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                      </div>
-                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                        <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                          Resend webhook event
-                        </Dialog.Title>
-                        <div className="mt-2">
-                          <p className="text-sm text-gray-500">
-                            Are you sure you want to resend the webhook event <span className="text-black font-medium capitalize">{webhookLogObj.resource_type}</span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                        onClick={e => { setWebhookLogResendModal(false); webhookLogResend() }}
-                      >
-                        Resend
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                        onClick={() => setWebhookLogResendModal(false)}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
+        <Dialog open={webhookLogResendModal} onOpenChange={setWebhookLogResendModal}>
+          <DialogContent className="sm:max-w-lg">
+            <div className="flex items-start gap-4">
+              <div className="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0">
+                <ExclamationTriangleIcon className="size-6 text-red-600" aria-hidden="true" />
+              </div>
+              <div className="text-center sm:text-left">
+                <DialogTitle>Resend webhook event</DialogTitle>
+                <DialogDescription className="mt-2">
+                  Are you sure you want to resend the webhook event{" "}
+                  <span className="text-foreground font-medium capitalize">{webhookLogObj.resource_type}</span>
+                </DialogDescription>
               </div>
             </div>
-          </Dialog>
-        </Transition.Root>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setWebhookLogResendModal(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={() => { setWebhookLogResendModal(false); webhookLogResend() }}>
+                Resend
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </td>
       <td className="absolute hidden" onClick={e => { e.preventDefault() }}>
-        <Transition.Root show={webhookLogDeleteModal} as={Fragment}>
-          <Dialog as="div" className="relative z-10" onClose={setWebhookLogDeleteModal}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-10 overflow-y-auto">
-              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                    <div className="sm:flex sm:items-start">
-                      <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                      </div>
-                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                        <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                          Delete webhook log
-                        </Dialog.Title>
-                        <div className="mt-2">
-                          <p className="text-sm text-gray-500">
-                            Are you sure you want to delete the webhook event <span className="text-black font-medium capitalize">{webhookLogObj.resource_type}</span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                      <button
-                        type="button"
-                        className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                        onClick={e => { setWebhookLogDeleteModal(false); webhookLogDelete() }}
-                      >
-                        Resend
-                      </button>
-                      <button
-                        type="button"
-                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                        onClick={() => setWebhookLogDeleteModal(false)}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
+        <Dialog open={webhookLogDeleteModal} onOpenChange={setWebhookLogDeleteModal}>
+          <DialogContent className="sm:max-w-lg">
+            <div className="flex items-start gap-4">
+              <div className="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0">
+                <ExclamationTriangleIcon className="size-6 text-red-600" aria-hidden="true" />
+              </div>
+              <div className="text-center sm:text-left">
+                <DialogTitle>Delete webhook log</DialogTitle>
+                <DialogDescription className="mt-2">
+                  Are you sure you want to delete the webhook event{" "}
+                  <span className="text-foreground font-medium capitalize">{webhookLogObj.resource_type}</span>
+                </DialogDescription>
               </div>
             </div>
-          </Dialog>
-        </Transition.Root>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setWebhookLogDeleteModal(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={() => { setWebhookLogDeleteModal(false); webhookLogDelete() }}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </td>
       <td className="absolute" onClick={e => { e.preventDefault() }}>
         <div className={`fixed inset-0 z-30 bg-black/20 transition-opacity ${drawerShow ? "opacity-100" : "pointer-events-none opacity-0"}`} onClick={() => setDrawerShow(false)} />
-        <div id={`drawer-${index}`} className={`fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto bg-white w-[800px] shadow-xl transition-transform dark:bg-gray-800 ${drawerShow ? "translate-x-0" : "translate-x-full"}`} aria-labelledby="drawer-right-label">
+        <div id={`drawer-${index}`} className={`fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto bg-white w-200 shadow-xl transition-transform dark:bg-gray-800 ${drawerShow ? "translate-x-0" : "translate-x-full"}`} aria-labelledby="drawer-right-label">
           <button
             type="button"
             className="absolute right-4 top-4 rounded-md text-gray-400 hover:text-gray-600"