diff --git a/src/components/Header.vue b/src/components/Header.vue
index aa14a46..362e194 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -10,7 +10,7 @@
         <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
-        <img v-show="false" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
+        <img v-show="true" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
           class="cursor-pointer"  @click="onAcctHeadClick"
         />
       </div>
diff --git a/src/stores/acctMgmt.js b/src/stores/acctMgmt.js
index fc64828..099eff1 100644
--- a/src/stores/acctMgmt.js
+++ b/src/stores/acctMgmt.js
@@ -147,6 +147,42 @@ export default defineStore('acctMgmtStore', {
         return false;
       };
     },
+    /** Add a role to the user in database.
+     * @param {string} usernameToEdit
+     * @param {string} roleCode
+     */
+    async addRoleToUser(usernameToEdit, roleCode) {
+      const apiAddRole = `/api/users/${usernameToEdit}/roles/${roleCode}`;
+
+      try{
+        const response = await this.$axios.put(apiAddRole);
+        if(response.status === 200) {
+          return true;
+        }
+      }
+      catch(error) {
+        apiError(error, 'Failed to add role to the account.');
+        return false;
+      };
+    },
+    /** Delete a role from the user in database.
+     * @param {string} usernameToEdit
+     * @param {string} roleCode
+     */
+      async deleteRoleToUser(usernameToEdit, roleCode) {
+        const apiDeleteRole = `/api/users/${usernameToEdit}/roles/${roleCode}`;
+
+        try{
+          const response = await this.$axios.delete(apiDeleteRole);
+          if(response.status === 200) {
+            return true;
+          }
+        }
+        catch(error) {
+          apiError(error, 'Failed to delete a role frome the account.');
+          return false;
+        };
+    },
     /**
      * Get user detail by unique username.
      * @param {string} uniqueUsername
diff --git a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
index 8b7b5cf..9371c9d 100644
--- a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
+++ b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
@@ -42,10 +42,10 @@
                             <div class="row-container flex-w-full-hoverable flex w-full justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
                                 <img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex justify-center"
-                                    @click="onAdminRightsBtnClick(true)"
+                                    @click="onAdminInputClick(slotProps.data, false)"
                                 />
                                 <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex justify-center"
-                                @click="onAdminRightsBtnClick(false)"
+                                    @click="onAdminInputClick(slotProps.data, true)"
                                 />
                             </div>   
                         </template>
@@ -284,6 +284,28 @@ export default {
             toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
         }
 
+        const onAdminInputClick = async(userData, inputIsAdminOn) => {
+            const ADMIN_ROLE_NAME = 'admin';
+            switch(inputIsAdminOn) {
+                case true:
+                    await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
+                    break;
+                case false:
+                    await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
+                    break;
+                default:
+                    break;
+            }
+            const userDataToReplace = {
+                username: userData.username,
+                name: userData.name,
+                is_admin: inputIsAdminOn,
+            };
+            
+            acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
+            toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+        }
+
         onMounted(async () => { 
             await fetchLoginUserData();
             await acctMgmtStore.getAllUserAccounts();
@@ -339,6 +361,7 @@ export default {
             handleScroll,
             getRowClass,
             onDeleteBtnClick,
+            onAdminInputClick,
             handleDeleteMouseOver,
             handleDeleteMouseOut,
             handleRowMouseOver,
@@ -373,10 +396,6 @@ export default {
         ...mapState(useAcctMgmtStore, ['allUserAccoutList']),
     },
     methods: {
-        onAdminRightsBtnClick(isOn){
-
-        },
-        
         /**
          * 無限滾動: 監聽 scroll 有沒有滾到底部
          * @param {element} event 滾動傳入的事件