diff --git a/components/manage-role/index.js b/components/manage-role/index.js
index 0e6bd5ec..ac582476 100644
--- a/components/manage-role/index.js
+++ b/components/manage-role/index.js
@@ -32,7 +32,7 @@ class ManageRole extends HTMLElement {
                 h3 {
                     margin-bottom: 20px;
                     font-size: 24px;
-                    color: #333;
+                    color: var(--text-primary);
                     margin-left: 10px;
                 }
 
@@ -44,7 +44,7 @@ class ManageRole extends HTMLElement {
 
                 .abc {
                     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                    background-color: #fff;
+                    background-color: var(--white);
                     padding: 2rem;
                     border-radius: 12px;
                     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -56,7 +56,7 @@ class ManageRole extends HTMLElement {
 
                 .tpen-project-manage-permissions {
                     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                    background-color: #fff;
+                    background-color: var(--white);
                     padding: 2rem;
                     border-radius: 12px;
                     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -79,7 +79,7 @@ class ManageRole extends HTMLElement {
 
                 .text-input::placeholder {
                     font-size: 15px;
-                    color: #999;
+                    color: var(--text-muted);
                     font-style: italic;
                 }
 
@@ -90,7 +90,7 @@ class ManageRole extends HTMLElement {
 
                 .text-input {
                     padding: 0.5rem;
-                    border: 1px solid #ccc;
+                    border: 1px solid var(--light-gray);
                     border-radius: 6px;
                     width: 100%;
                     font-size: 1rem;
@@ -108,12 +108,12 @@ class ManageRole extends HTMLElement {
 
                 .radio-btn {
                     padding: 0.2rem 0.5rem;
-                    border: 0.2px solid #ccc;
+                    border: 0.2px solid var(--light-gray);
                     border-radius: 8px;
                     cursor: pointer;
                     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
                     font-size: 15px;
-                    background-color: #fff;
+                    background-color: var(--white);
                     color: var(--primary-color);
                     user-select: none;
                     box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
@@ -121,7 +121,7 @@ class ManageRole extends HTMLElement {
 
                 .radio-permission:checked + .radio-btn {
                     background-color: var(--primary-color);
-                    color: #fff;
+                    color: var(--white);
                     border-color: var(--primary-color);
                 }
 
@@ -130,14 +130,14 @@ class ManageRole extends HTMLElement {
                     border: none;
                     border-radius: 8px;
                     background-color: var(--primary-color);
-                    color: #fff;
+                    color: var(--white);
                     cursor: pointer;
                     transition: background-color 0.3s ease;
                     font-size: 1rem;
                 }
 
                 .role-btn:disabled {
-                    background-color: #a5b4fc;
+                    background-color: var(--gray);
                     cursor: not-allowed;
                 }
 
@@ -154,8 +154,8 @@ class ManageRole extends HTMLElement {
 
                 #permissions {
                     padding: 1rem;
-                    background-color: #f9fafb;
-                    border: 1px solid #e5e7eb;
+                    background-color: var(--light-color);
+                    border: 1px solid var(--light-gray);
                     border-radius: 6px;
                     font-size: 0.9rem;
                     margin: 1rem 0;
@@ -212,8 +212,8 @@ class ManageRole extends HTMLElement {
                 }
                 
                 .remove-field-btn {
-                    background-color: #ff4d4d;
-                    color: white;
+                    background-color: var(--error-color);
+                    color: var(--white);
                     border: none;
                     cursor: pointer;
                     border-radius: 4px;
@@ -226,7 +226,7 @@ class ManageRole extends HTMLElement {
                 }
 
                 .remove-field-btn:hover {
-                    background-color: #ff1a1a;
+                    background-color: var(--accent);
                 }
 
                 .icon {
diff --git a/interfaces/manage-project/index.js b/interfaces/manage-project/index.js
index 13c52c36..f9f10f11 100644
--- a/interfaces/manage-project/index.js
+++ b/interfaces/manage-project/index.js
@@ -70,6 +70,6 @@ async function render() {
     
     const manageCustomRoleBtn = document.getElementById("manage-custom-role-btn")
     if (manageCustomRoleBtn) {
-        manageCustomRoleBtn.href = `/components/manage-role/index.html?projectID=${TPEN.screen.projectInQuery}`
+        manageCustomRoleBtn.href = `/role/manage?projectID=${TPEN.screen.projectInQuery}`
     }
 }
diff --git a/interfaces/manage-role/index.html b/interfaces/manage-role/index.html
new file mode 100644
index 00000000..61b1794c
--- /dev/null
+++ b/interfaces/manage-role/index.html
@@ -0,0 +1,21 @@
+---
+title: Manage Roles
+permalink: /role/manage
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manage Roles</title>
+    <script type="module" src="/components/gui/site/index.js"></script>
+    <script type="module" src="/components/manage-role/index.js"></script>
+    <link href="/components/gui/site/index.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <tpen-page>
+        <tpen-manage-role></tpen-manage-role>
+    </tpen-page>
+</body>
+</html>