Index: chapterx-frontend/src/components/admin/UserTable.tsx
===================================================================
--- chapterx-frontend/src/components/admin/UserTable.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/components/admin/UserTable.tsx	(revision a6e33d1f34c0dbbfff38bfb2c73eea32abfe7cff)
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Search, Shield, UserX, UserCheck } from 'lucide-react'
+import axios from 'axios'
 import { useAuthStore } from '../../store/authStore'
-import { useNotificationStore } from '../../store/notificationStore'
 import { useUIStore } from '../../store/uiStore'
 import { User, UserRole } from '../../types'
@@ -10,11 +10,15 @@
 import { Modal } from '../ui/Modal'
 
+const API = 'https://localhost:7125/api'
+
 export const UserTable: React.FC = () => {
-  const { allUsers, updateUserRole, currentUser } = useAuthStore()
-  const { addNotification } = useNotificationStore()
+  const { allUsers, updateUserRole, currentUser, token } = useAuthStore()
   const { addToast } = useUIStore()
   const [search, setSearch] = useState('')
   const [confirmUser, setConfirmUser] = useState<User | null>(null)
   const [confirmAction, setConfirmAction] = useState<'promote' | 'demote' | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const authHeaders = token ? { Authorization: `Bearer ${token}` } : {}
 
   const filtered = allUsers.filter(
@@ -25,22 +29,30 @@
   )
 
-  const handlePromote = (user: User) => {
-    const newRole: UserRole = user.role === 'regular' ? 'writer' : user.role === 'writer' ? 'admin' : 'admin'
-    updateUserRole(user.user_id, newRole)
-    addNotification({
-      user_id: user.user_id,
-      type: 'system',
-      title: 'Role Updated',
-      message: `Your account has been promoted to ${newRole}.`,
-    })
-    addToast(`${user.username} promoted to ${newRole}`)
-    setConfirmUser(null)
+  const handlePromote = async (user: User) => {
+    setLoading(true)
+    try {
+      await axios.post(`${API}/admins`, { userId: user.user_id }, { headers: authHeaders })
+      updateUserRole(user.user_id, 'admin')
+      addToast(`${user.username} promoted to admin`)
+    } catch (err: any) {
+      addToast(err?.response?.data?.message || 'Failed to promote user.', 'error')
+    } finally {
+      setLoading(false)
+      setConfirmUser(null)
+    }
   }
 
-  const handleDemote = (user: User) => {
-    const newRole: UserRole = user.role === 'admin' ? 'writer' : 'regular'
-    updateUserRole(user.user_id, newRole)
-    addToast(`${user.username} role changed to ${newRole}`, 'info')
-    setConfirmUser(null)
+  const handleDemote = async (user: User) => {
+    setLoading(true)
+    try {
+      await axios.delete(`${API}/admins/${user.user_id}`, { headers: authHeaders })
+      updateUserRole(user.user_id, 'writer')
+      addToast(`${user.username} removed from admin`, 'info')
+    } catch (err: any) {
+      addToast(err?.response?.data?.message || 'Failed to demote user.', 'error')
+    } finally {
+      setLoading(false)
+      setConfirmUser(null)
+    }
   }
 
@@ -140,4 +152,5 @@
                 variant={confirmAction === 'promote' ? 'primary' : 'danger'}
                 className="flex-1"
+                loading={loading}
                 onClick={() => confirmAction === 'promote' ? handlePromote(confirmUser) : handleDemote(confirmUser)}
               >