diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3d9079..67b0496 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -544,66 +544,79 @@ packages:
     resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.57.1':
     resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.57.1':
     resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.57.1':
     resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.57.1':
     resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.57.1':
     resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.57.1':
     resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.57.1':
     resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.57.1':
     resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.57.1':
     resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.57.1':
     resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.57.1':
     resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.57.1':
     resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.57.1':
     resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
@@ -676,24 +689,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -896,8 +913,8 @@ packages:
   '@vue/devtools-api@7.7.9':
     resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
 
-  '@vue/devtools-core@8.0.5':
-    resolution: {integrity: sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==}
+  '@vue/devtools-core@8.0.6':
+    resolution: {integrity: sha512-fN7iVtpSQQdtMORWwVZ1JiIAKriinhD+lCHqPw9Rr252ae2TczILEmW0zcAZifPW8HfYcbFkn+h7Wv6kQQCayw==}
     peerDependencies:
       vue: ^3.0.0
 
@@ -907,12 +924,18 @@ packages:
   '@vue/devtools-kit@8.0.5':
     resolution: {integrity: sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==}
 
+  '@vue/devtools-kit@8.0.6':
+    resolution: {integrity: sha512-9zXZPTJW72OteDXeSa5RVML3zWDCRcO5t77aJqSs228mdopYj5AiTpihozbsfFJ0IodfNs7pSgOGO3qfCuxDtw==}
+
   '@vue/devtools-shared@7.7.9':
     resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
 
   '@vue/devtools-shared@8.0.5':
     resolution: {integrity: sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==}
 
+  '@vue/devtools-shared@8.0.6':
+    resolution: {integrity: sha512-Pp1JylTqlgMJvxW6MGyfTF8vGvlBSCAvMFaDCYa82Mgw7TT5eE5kkHgDvmOGHWeJE4zIDfCpCxHapsK2LtIAJg==}
+
   '@vue/eslint-config-prettier@10.2.0':
     resolution: {integrity: sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==}
     peerDependencies:
@@ -1531,24 +1554,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -2859,10 +2886,10 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.9
 
-  '@vue/devtools-core@8.0.5(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+  '@vue/devtools-core@8.0.6(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
-      '@vue/devtools-kit': 8.0.5
-      '@vue/devtools-shared': 8.0.5
+      '@vue/devtools-kit': 8.0.6
+      '@vue/devtools-shared': 8.0.6
       mitt: 3.0.1
       nanoid: 5.1.6
       pathe: 2.0.3
@@ -2891,6 +2918,16 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.6
 
+  '@vue/devtools-kit@8.0.6':
+    dependencies:
+      '@vue/devtools-shared': 8.0.6
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 2.1.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
   '@vue/devtools-shared@7.7.9':
     dependencies:
       rfdc: 1.4.1
@@ -2899,6 +2936,10 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
+  '@vue/devtools-shared@8.0.6':
+    dependencies:
+      rfdc: 1.4.1
+
   '@vue/eslint-config-prettier@10.2.0(eslint@10.0.0(jiti@2.6.1))(prettier@3.8.1)':
     dependencies:
       eslint: 10.0.0(jiti@2.6.1)
@@ -3899,7 +3940,7 @@ snapshots:
 
   vite-plugin-vue-devtools@8.0.5(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)):
     dependencies:
-      '@vue/devtools-core': 8.0.5(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+      '@vue/devtools-core': 8.0.6(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       '@vue/devtools-kit': 8.0.5
       '@vue/devtools-shared': 8.0.5
       sirv: 3.0.2
diff --git a/src/components/token-manage/CreateTokenCard.vue b/src/components/token-manage/CreateTokenCard.vue
new file mode 100644
index 0000000..a141b31
--- /dev/null
+++ b/src/components/token-manage/CreateTokenCard.vue
@@ -0,0 +1,560 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { Copy, KeyRound, ShieldAlert, ShieldCheck } from 'lucide-vue-next'
+import { useBackendStore } from '@/composables/useBackendStore'
+import { wsRpcCall } from '@/composables/useWsRpc'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+type ToastState = {
+  type: 'success' | 'error'
+  title: string
+  message: string
+}
+type ScopeMode = 'global' | 'agent'
+
+const STATIC_FIELDS = ['cpu', 'system', 'gpu'] as const
+const DYNAMIC_FIELDS = ['cpu', 'ram', 'load', 'system', 'disk', 'network', 'gpu'] as const
+const TASK_TYPES = ['ping', 'tcp_ping', 'http_ping', 'web_shell', 'execute', 'ip'] as const
+
+const { currentBackend } = useBackendStore()
+const backendUrl = computed(() => currentBackend.value?.url ?? '')
+
+const scopeMode = ref<ScopeMode>('global')
+const knownAgentUuids = ref<string[]>([])
+const selectedKnownAgentUuids = ref<string[]>([])
+const otherAgentUuidsText = ref('')
+const listAgentsLoading = ref(false)
+const listAgentsError = ref('')
+
+const username = ref('')
+const password = ref('')
+const timestampFrom = ref('')
+const timestampTo = ref('')
+const showOptionalOptions = ref(false)
+const showPayloadPreview = ref(false)
+
+const staticWrite = ref(false)
+const staticReads = ref<string[]>([])
+const dynamicWrite = ref(false)
+const dynamicReads = ref<string[]>([])
+const taskListen = ref(false)
+const taskCreate = ref<string[]>([])
+const taskRead = ref<string[]>([])
+const taskWrite = ref<string[]>([])
+const crontabRead = ref(false)
+const crontabWrite = ref(false)
+const crontabDelete = ref(false)
+
+const createLoading = ref(false)
+const createToast = ref<ToastState | null>(null)
+const createdCredential = ref<{ key: string; secret: string } | null>(null)
+
+const toggleList = (list: string[], val: string) => {
+  const idx = list.indexOf(val)
+  if (idx >= 0) {
+    list.splice(idx, 1)
+    return
+  }
+  list.push(val)
+}
+
+const parseTimestamp = (val: string) => {
+  if (!val.trim()) return null
+  const ms = new Date(val).getTime()
+  return Number.isFinite(ms) ? ms : NaN
+}
+
+const parseAgentUuidsText = (text: string) => {
+  return text
+    .split(/[\n,\s]+/g)
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+const selectedAgentUuids = computed(() => {
+  const dedup = new Set<string>()
+  for (const uuid of selectedKnownAgentUuids.value) dedup.add(uuid)
+  for (const uuid of parseAgentUuidsText(otherAgentUuidsText.value)) dedup.add(uuid)
+  return [...dedup]
+})
+
+const toggleKnownAgentUuid = (agentUuid: string) => {
+  const idx = selectedKnownAgentUuids.value.indexOf(agentUuid)
+  if (idx >= 0) {
+    selectedKnownAgentUuids.value.splice(idx, 1)
+    return
+  }
+  selectedKnownAgentUuids.value.push(agentUuid)
+}
+
+const extractAgentUuidList = (result: unknown) => {
+  if (Array.isArray(result)) {
+    return result
+      .map((it) => {
+        if (typeof it === 'string') return it.trim()
+        if (it && typeof it === 'object') {
+          const obj = it as Record<string, unknown>
+          if (typeof obj.agent_uuid === 'string') return obj.agent_uuid.trim()
+          if (typeof obj.uuid === 'string') return obj.uuid.trim()
+        }
+        return ''
+      })
+      .filter(Boolean)
+  }
+
+  if (result && typeof result === 'object') {
+    const obj = result as Record<string, unknown>
+    for (const key of ['agent_uuid_list', 'agent_uuids', 'uuids', 'list']) {
+      if (!Array.isArray(obj[key])) continue
+      return (obj[key] as unknown[])
+        .map((it) => (typeof it === 'string' ? it.trim() : ''))
+        .filter(Boolean)
+    }
+  }
+
+  return []
+}
+
+const loadKnownAgentUuids = async () => {
+  const url = backendUrl.value
+  const token = currentBackend.value?.token?.trim() || ''
+  const selectedSet = new Set(selectedKnownAgentUuids.value)
+  knownAgentUuids.value = []
+  listAgentsError.value = ''
+  if (!url) return
+  if (!token) {
+    listAgentsError.value = 'Current backend token is empty. Cannot list agents.'
+    return
+  }
+
+  listAgentsLoading.value = true
+  try {
+    const result = await wsRpcCall<unknown>(url, 'nodeget-server_list_all_agent_uuid', { token })
+    knownAgentUuids.value = extractAgentUuidList(result)
+    selectedKnownAgentUuids.value = knownAgentUuids.value.filter((uuid) => selectedSet.has(uuid))
+  } catch (e: any) {
+    listAgentsError.value = e?.message || 'Failed to load agent list'
+  } finally {
+    listAgentsLoading.value = false
+  }
+}
+
+const setScopeMode = async (mode: ScopeMode) => {
+  if (scopeMode.value === mode) return
+  scopeMode.value = mode
+
+  if (mode === 'global') {
+    selectedKnownAgentUuids.value = []
+    otherAgentUuidsText.value = ''
+    return
+  }
+
+  await loadKnownAgentUuids()
+}
+
+const buildPermissions = () => {
+  const permissions: Record<string, unknown>[] = []
+
+  if (staticWrite.value) permissions.push({ static_monitoring: 'write' })
+  for (const field of staticReads.value) permissions.push({ static_monitoring: { read: field } })
+
+  if (dynamicWrite.value) permissions.push({ dynamic_monitoring: 'write' })
+  for (const field of dynamicReads.value) permissions.push({ dynamic_monitoring: { read: field } })
+
+  if (taskListen.value) permissions.push({ task: 'listen' })
+  for (const taskType of taskCreate.value) permissions.push({ task: { create: taskType } })
+  for (const taskType of taskRead.value) permissions.push({ task: { read: taskType } })
+  for (const taskType of taskWrite.value) permissions.push({ task: { write: taskType } })
+
+  if (crontabRead.value) permissions.push({ crontab: 'read' })
+  if (crontabWrite.value) permissions.push({ crontab: 'write' })
+  if (crontabDelete.value) permissions.push({ crontab: 'delete' })
+
+  return permissions
+}
+
+const selectedPermissionCount = computed(() => buildPermissions().length)
+
+const scopePreview = computed(() => {
+  if (scopeMode.value === 'global') return ['global']
+  return selectedAgentUuids.value.map((agentUuid) => ({ agent_uuid: agentUuid }))
+})
+
+const tokenLimitPreview = computed(() => [
+  {
+    scopes: scopePreview.value,
+    permissions: buildPermissions(),
+  },
+])
+
+const createdTokenText = computed(() => {
+  if (!createdCredential.value) return ''
+  return `${createdCredential.value.key}:${createdCredential.value.secret}`
+})
+
+const handleCreateToken = async () => {
+  createToast.value = null
+  createdCredential.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const creatorToken = currentBackend.value?.token?.trim() || ''
+  if (!creatorToken) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Current backend token is empty. Select a backend with a valid token first.',
+    }
+    return
+  }
+
+  const userVal = username.value.trim()
+  const passVal = password.value
+  if ((userVal && !passVal) || (!userVal && passVal)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'username and password must be provided together or omitted together.',
+    }
+    return
+  }
+
+  const fromMs = parseTimestamp(timestampFrom.value)
+  if (Number.isNaN(fromMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from is not a valid datetime.',
+    }
+    return
+  }
+
+  const toMs = parseTimestamp(timestampTo.value)
+  if (Number.isNaN(toMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_to is not a valid datetime.',
+    }
+    return
+  }
+
+  if (fromMs !== null && toMs !== null && fromMs > toMs) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from cannot be greater than timestamp_to.',
+    }
+    return
+  }
+
+  const scopes = scopePreview.value
+  if (scopeMode.value === 'agent' && scopes.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Scope is agent_uuid, but no agent UUID is selected.',
+    }
+    return
+  }
+
+  const permissions = buildPermissions()
+  if (permissions.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'At least one permission is required.',
+    }
+    return
+  }
+
+  const tokenCreation: Record<string, unknown> = {
+    username: userVal || null,
+    password: passVal || null,
+    timestamp_from: fromMs,
+    timestamp_to: toMs,
+    version: 1,
+    token_limit: [{ scopes, permissions }],
+  }
+
+  const payloadObj = {
+    father_token: creatorToken,
+    token_creation: tokenCreation,
+  }
+
+  createLoading.value = true
+  try {
+    const result = await wsRpcCall<{ key?: string; secret?: string }>(url, 'token_create', payloadObj)
+
+    const key = result?.key || ''
+    const secret = result?.secret || ''
+    if (!key || !secret) {
+      throw new Error('Token was created but key/secret is missing in response.')
+    }
+
+    createdCredential.value = { key, secret }
+    createToast.value = {
+      type: 'success',
+      title: 'Token Created',
+      message: 'Save the generated credential now. Secret is not retrievable later.',
+    }
+  } catch (e: any) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    createLoading.value = false
+  }
+}
+
+const copyText = async (text: string) => {
+  if (!text) return
+  await navigator.clipboard.writeText(text)
+}
+
+onMounted(() => {
+  if (scopeMode.value === 'agent') loadKnownAgentUuids()
+})
+
+watch([backendUrl, () => currentBackend.value?.token], () => {
+  if (scopeMode.value === 'agent') loadKnownAgentUuids()
+})
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <KeyRound class="h-5 w-5" />
+        Create Token
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-5">
+      <div class="space-y-3">
+        <Label>Scope</Label>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <Button :variant="scopeMode === 'global' ? 'default' : 'outline'" size="sm" @click="setScopeMode('global')">global</Button>
+            <Button :variant="scopeMode === 'agent' ? 'default' : 'outline'" size="sm" @click="setScopeMode('agent')">agent_uuid</Button>
+          </div>
+          <Button v-if="scopeMode === 'agent'" variant="outline" size="sm" :disabled="listAgentsLoading" @click="loadKnownAgentUuids">
+            {{ listAgentsLoading ? 'Loading...' : 'Refresh Agents' }}
+          </Button>
+        </div>
+        <div v-if="scopeMode === 'agent'" class="rounded-md border p-3 space-y-3">
+          <div v-if="listAgentsError" class="text-sm text-destructive">{{ listAgentsError }}</div>
+          <div v-else-if="knownAgentUuids.length === 0" class="text-sm text-muted-foreground">No known agents found on current server.</div>
+          <div v-else class="grid gap-2 max-h-48 overflow-auto pr-1">
+            <label v-for="agentUuid in knownAgentUuids" :key="`known-agent-${agentUuid}`" class="flex items-center gap-2 text-sm break-all">
+              <Checkbox :checked="selectedKnownAgentUuids.includes(agentUuid)" @click.stop="toggleKnownAgentUuid(agentUuid)" />
+              <span>{{ agentUuid }}</span>
+            </label>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="other-agent-uuids">Other agent UUIDs</Label>
+            <textarea id="other-agent-uuids" v-model="otherAgentUuidsText" class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" placeholder="Optional. One UUID per line, or split by comma/space." />
+          </div>
+        </div>
+      </div>
+
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <Label>Permissions</Label>
+          <Badge variant="secondary">{{ selectedPermissionCount }} selected</Badge>
+        </div>
+
+        <details class="rounded-md border p-3" open>
+          <summary class="cursor-pointer select-none text-sm font-medium">static_monitoring</summary>
+          <div class="mt-3 space-y-2">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="staticWrite ? 'default' : 'outline'" size="sm" @click="staticWrite = !staticWrite">
+                write
+              </Button>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <Button
+                v-for="field in STATIC_FIELDS"
+                :key="`sm-read-${field}`"
+                :variant="staticReads.includes(field) ? 'default' : 'outline'"
+                size="sm"
+                @click="toggleList(staticReads, field)"
+              >
+                read:{{ field }}
+              </Button>
+            </div>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">dynamic_monitoring</summary>
+          <div class="mt-3 space-y-2">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="dynamicWrite ? 'default' : 'outline'" size="sm" @click="dynamicWrite = !dynamicWrite">
+                write
+              </Button>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <Button
+                v-for="field in DYNAMIC_FIELDS"
+                :key="`dm-read-${field}`"
+                :variant="dynamicReads.includes(field) ? 'default' : 'outline'"
+                size="sm"
+                @click="toggleList(dynamicReads, field)"
+              >
+                read:{{ field }}
+              </Button>
+            </div>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">task</summary>
+          <div class="mt-3 space-y-3">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="taskListen ? 'default' : 'outline'" size="sm" @click="taskListen = !taskListen">
+                listen
+              </Button>
+            </div>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">create</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-create-${taskType}`"
+                  :variant="taskCreate.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskCreate, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">read</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-read-${taskType}`"
+                  :variant="taskRead.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskRead, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">write</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-write-${taskType}`"
+                  :variant="taskWrite.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskWrite, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">crontab</summary>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <Button :variant="crontabRead ? 'default' : 'outline'" size="sm" @click="crontabRead = !crontabRead">
+              read
+            </Button>
+            <Button :variant="crontabWrite ? 'default' : 'outline'" size="sm" @click="crontabWrite = !crontabWrite">
+              write
+            </Button>
+            <Button :variant="crontabDelete ? 'default' : 'outline'" size="sm" @click="crontabDelete = !crontabDelete">
+              delete
+            </Button>
+          </div>
+        </details>
+      </div>
+
+      <div class="space-y-2">
+        <Button variant="outline" size="sm" @click="showOptionalOptions = !showOptionalOptions">
+          {{ showOptionalOptions ? 'Hide Optional Fields' : 'Show Optional Fields' }}
+        </Button>
+      </div>
+
+      <div v-if="showOptionalOptions" class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2">
+          <Label for="username">username</Label>
+          <Input id="username" v-model="username" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <Label for="password">password</Label>
+          <Input id="password" v-model="password" type="password" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <Label for="timestamp-from">timestamp_from</Label>
+          <Input id="timestamp-from" v-model="timestampFrom" type="datetime-local" />
+        </div>
+        <div class="space-y-2">
+          <Label for="timestamp-to">timestamp_to</Label>
+          <Input id="timestamp-to" v-model="timestampTo" type="datetime-local" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Button variant="outline" size="sm" @click="showPayloadPreview = !showPayloadPreview">
+          {{ showPayloadPreview ? 'Hide Payload Preview' : 'Show Payload Preview' }}
+        </Button>
+        <div v-if="showPayloadPreview" class="space-y-3 rounded-md border p-3">
+          <div class="text-sm font-medium">token_limit preview</div>
+          <pre class="text-xs leading-5 overflow-x-auto">{{ JSON.stringify(tokenLimitPreview, null, 2) }}</pre>
+        </div>
+      </div>
+
+      <Button class="w-full" :disabled="createLoading" @click="handleCreateToken">
+        <span v-if="createLoading">Creating...</span>
+        <span v-else>Create Token</span>
+      </Button>
+
+      <Alert v-if="createToast" :variant="createToast.type === 'success' ? 'default' : 'destructive'">
+        <ShieldCheck v-if="createToast.type === 'success'" class="h-4 w-4" />
+        <ShieldAlert v-else class="h-4 w-4" />
+        <AlertTitle>{{ createToast.title }}</AlertTitle>
+        <AlertDescription>{{ createToast.message }}</AlertDescription>
+      </Alert>
+
+      <div v-if="createdCredential" class="rounded-md border p-3 space-y-2">
+        <div class="flex items-center justify-between gap-2">
+          <Badge variant="secondary">Result</Badge>
+          <Button variant="outline" size="sm" @click="copyText(createdTokenText)">
+            <Copy class="h-3.5 w-3.5 mr-1" />
+            Copy key:secret
+          </Button>
+        </div>
+        <div class="text-xs font-mono break-all">key: {{ createdCredential.key }}</div>
+        <div class="text-xs font-mono break-all">secret: {{ createdCredential.secret }}</div>
+        <div class="text-xs font-mono break-all">token: {{ createdTokenText }}</div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/token-manage/DeleteTokenCard.vue b/src/components/token-manage/DeleteTokenCard.vue
new file mode 100644
index 0000000..15394ca
--- /dev/null
+++ b/src/components/token-manage/DeleteTokenCard.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { ShieldAlert, ShieldCheck, Trash2 } from 'lucide-vue-next'
+import { useBackendStore } from '@/composables/useBackendStore'
+import { wsRpcCall } from '@/composables/useWsRpc'
+import { usePermissionStore } from '@/stores/usePermissionStore'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+type ToastState = {
+  type: 'success' | 'error'
+  title: string
+  message: string
+}
+
+const { currentBackend } = useBackendStore()
+const backendUrl = computed(() => currentBackend.value?.url ?? '')
+
+const permissionStore = usePermissionStore()
+const { tokenInfo } = storeToRefs(permissionStore)
+const currentTokenKey = computed(() => tokenInfo.value?.token_key?.trim() || '')
+
+const deleteToken = ref('')
+const deleteTargetTokenKey = ref('')
+const deleteLoading = ref(false)
+const deleteToast = ref<ToastState | null>(null)
+
+const handleDeleteToken = async () => {
+  deleteToast.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const token = deleteToken.value.trim()
+  if (!token) {
+    deleteToast.value = { type: 'error', title: 'Delete Failed', message: 'token is required.' }
+    return
+  }
+
+  const targetKey = deleteTargetTokenKey.value.split(':')[0]?.trim() || ''
+
+  if (deleteTargetTokenKey.value.includes(':')) {
+    deleteTargetTokenKey.value = targetKey
+  }
+
+  if (!targetKey) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'target_token_key is required.',
+    }
+    return
+  }
+  if (currentTokenKey.value && targetKey === currentTokenKey.value) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'Super token can only delete non-self token here.',
+    }
+    return
+  }
+
+  const payloadObj: Record<string, unknown> = {
+    token,
+    target_token_key: targetKey,
+  }
+
+  deleteLoading.value = true
+  try {
+    const res = await wsRpcCall<{ success?: boolean; message?: string }>(url, 'token_delete', payloadObj)
+    if (res.success !== true) {
+      throw new Error(res?.message || 'Token deletion failed without error message.')
+    }
+    deleteToast.value = {
+      type: 'success',
+      title: 'Delete Requested',
+      message: `Token with key ${targetKey} has been deleted.`,
+    }
+  } catch (e: any) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+watch(
+  () => currentBackend.value?.token,
+  (next, prev) => {
+    if (!deleteToken.value || deleteToken.value === prev) deleteToken.value = next || ''
+  },
+  { immediate: true },
+)
+
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <Trash2 class="h-5 w-5" />
+        Delete Token
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-5">
+      <div class="space-y-2">
+        <Label for="delete-token">token</Label>
+        <Input id="delete-token" v-model="deleteToken" placeholder="Super token performing this deletion" />
+      </div>
+      <div class="space-y-2">
+        <Label for="delete-target-token-key">target_token_key (required, must be non-self)</Label>
+        <Input
+          id="delete-target-token-key"
+          v-model="deleteTargetTokenKey"
+          placeholder="Provide another token_key to delete"
+        />
+      </div>
+
+      <Button class="w-full" variant="destructive" :disabled="deleteLoading" @click="handleDeleteToken">
+        <span v-if="deleteLoading">Deleting...</span>
+        <span v-else>Delete Token</span>
+      </Button>
+
+      <Alert v-if="deleteToast" :variant="deleteToast.type === 'success' ? 'default' : 'destructive'">
+        <ShieldCheck v-if="deleteToast.type === 'success'" class="h-4 w-4" />
+        <ShieldAlert v-else class="h-4 w-4" />
+        <AlertTitle>{{ deleteToast.title }}</AlertTitle>
+        <AlertDescription>{{ deleteToast.message }}</AlertDescription>
+      </Alert>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/router.ts b/src/router.ts
index e08eff2..f3e6dc8 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -13,6 +13,11 @@ const router = createRouter({
       name: 'server-detail',
       component: () => import('./views/ServerDetailView.vue'),
     },
+    {
+      path: '/token',
+      name: 'token-manage',
+      component: () => import('./views/TokenManageView.vue'),
+    },
   ],
 })
 
diff --git a/src/views/TokenManageView.vue b/src/views/TokenManageView.vue
new file mode 100644
index 0000000..a8183ab
--- /dev/null
+++ b/src/views/TokenManageView.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useBackendStore } from '@/composables/useBackendStore'
+import HeaderView from '@/components/HeaderView.vue'
+import CreateTokenCard from '@/components/token-manage/CreateTokenCard.vue'
+import DeleteTokenCard from '@/components/token-manage/DeleteTokenCard.vue'
+const { currentBackend } = useBackendStore()
+
+const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =>
+  currentBackend.value?.url ? 'connected' : 'disconnected',
+)
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div class="container mx-auto p-6 space-y-6">
+      <HeaderView :status="backendStatus" />
+      <div class="grid gap-6 xl:grid-cols-2">
+        <CreateTokenCard />
+        <DeleteTokenCard />
+      </div>
+    </div>
+  </div>
+</template>