diff --git a/.env.example b/.env.production
similarity index 64%
rename from .env.example
rename to .env.production
index fbbdd95..ac55503 100644
--- a/.env.example
+++ b/.env.production
@@ -1,3 +1,3 @@
-# member.ose.tw frontend env
+# member.ose.tw frontend env (production)
 VITE_APP_TITLE=member.ose.tw
 VITE_API_BASE_URL=http://memberapi_ose_tw:8000
diff --git a/src/pages/admin/RolesPage.vue b/src/pages/admin/RolesPage.vue
index a9c1e9d..64a6520 100644
--- a/src/pages/admin/RolesPage.vue
+++ b/src/pages/admin/RolesPage.vue
@@ -11,6 +11,7 @@
     <el-table v-else :data="roles" stripe border class="w-full shadow-sm">
       <template #empty><el-empty description="目前無角色" /></template>
       <el-table-column prop="role_key" label="Role Key" width="200" />
+      <el-table-column prop="role_code" label="Role Code" min-width="220" />
       <el-table-column prop="system_name" label="系統" min-width="150" />
       <el-table-column prop="name" label="角色名稱" min-width="180" />
       <el-table-column prop="status" label="狀態" width="110" />
@@ -35,6 +36,9 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="Role Code" prop="role_code">
+          <el-input v-model="createForm.role_code" placeholder="例如 mkt:marketing_card:edit" />
+        </el-form-item>
         <el-form-item label="角色名稱" prop="name"><el-input v-model="createForm.name" /></el-form-item>
         <el-form-item label="描述"><el-input v-model="createForm.description" type="textarea" :rows="2" /></el-form-item>
         <el-form-item label="狀態">
@@ -53,6 +57,9 @@
     <el-dialog v-model="showEditDialog" title="編輯角色" width="660px" @close="resetEditForm">
       <el-form :model="editForm" label-width="150px">
         <el-form-item label="Role Key"><el-input :model-value="editForm.role_key" disabled /></el-form-item>
+        <el-form-item label="Role Code">
+          <el-input v-model="editForm.role_code" placeholder="例如 mkt:marketing_card:edit" />
+        </el-form-item>
         <el-form-item label="系統">
           <el-select v-model="editForm.system_key" filterable style="width: 100%">
             <el-option
@@ -127,6 +134,7 @@ const createFormRef = ref()
 
 const createForm = ref({
   system_key: '',
+  role_code: '',
   name: '',
   description: '',
   status: 'active'
@@ -134,12 +142,14 @@ const createForm = ref({
 const editForm = ref({
   role_key: '',
   system_key: '',
+  role_code: '',
   name: '',
   description: '',
   status: 'active'
 })
 const rules = {
   system_key: [{ required: true, message: '請選擇系統', trigger: 'change' }],
+  role_code: [{ required: true, message: '請輸入 Role Code', trigger: 'blur' }],
   name: [{ required: true, message: '請輸入角色名稱', trigger: 'blur' }]
 }
 
@@ -175,6 +185,7 @@ async function load() {
 function resetCreateForm() {
   createForm.value = {
     system_key: '',
+    role_code: '',
     name: '',
     description: '',
     status: 'active'
@@ -185,6 +196,7 @@ function openEdit(row) {
   editForm.value = {
     role_key: row.role_key,
     system_key: row.system_key,
+    role_code: row.role_code || '',
     name: row.name,
     description: row.description || '',
     status: row.status || 'active'
@@ -196,6 +208,7 @@ function resetEditForm() {
   editForm.value = {
     role_key: '',
     system_key: '',
+    role_code: '',
     name: '',
     description: '',
     status: 'active'
@@ -209,6 +222,7 @@ async function handleCreate() {
   try {
     await createRole({
       system_key: createForm.value.system_key,
+      role_code: createForm.value.role_code,
       name: createForm.value.name,
       description: createForm.value.description || null,
       status: createForm.value.status
@@ -229,6 +243,7 @@ async function handleEdit() {
   try {
     await updateRole(editForm.value.role_key, {
       system_key: editForm.value.system_key,
+      role_code: editForm.value.role_code,
       name: editForm.value.name,
       description: editForm.value.description || null,
       status: editForm.value.status