diff --git a/frontend/src/pages/LeaderBoard.vue b/frontend/src/pages/LeaderBoard.vue
index d63a42a6..aaeec2aa 100644
--- a/frontend/src/pages/LeaderBoard.vue
+++ b/frontend/src/pages/LeaderBoard.vue
@@ -1,178 +1,169 @@
 <template>
-  <!-- ДЕБАГ ПАНЕЛЬ — ВСЕГДА ВИДНА -->
-  <div class="fixed top-4 right-4 z-50 space-y-3">
-    <div class="bg-red-600 text-white p-4 rounded-lg shadow-2xl font-mono text-xs max-w-sm">
-      <p class="font-bold">ДЕБАГ ИНФО</p>
-      <p>Пользователь: {{ currentUserEmail }}</p>
-      <p>Роли: {{ currentUserRoles.join(', ') || 'нет' }}</p>
-      <p>Текущая роль: {{ currentUserRole || 'не определена' }}</p>
-      <p>Выбрана вкладка: {{ selectedRole }}</p>
-      <p>Всего пользователей в ЛБ: {{ leaderboard.length }}</p>
-      <p>В текущей группе: {{ filteredLeaderboard.length }}</p>
-      <p>Загрузка: {{ loading ? 'идёт...' : 'завершена' }}</p>
+  <!-- ДЕБАГ-ПАНЕЛЬ (всегда видна) -->
+  <div class="fixed top-4 right-4 z-50 space-y-4">
+    <div class="bg-red-600 text-white p-5 rounded-xl shadow-2xl font-mono text-xs max-w-md leading-relaxed">
+      <p class="font-bold text-lg mb-2">ДЕБАГ ЛИДЕРБОРДА</p>
+      <p>Пользователь: <strong>{{ currentUserEmail }}</strong></p>
+      <p>Его роли: <strong>{{ currentUserRoles.join(', ') || '—' }}</strong></p>
+      <p>Определена роль: <strong>{{ currentUserRole || 'неизвестно' }}</strong></p>
+      <p>Выбрана вкладка: <strong>{{ selectedRole }}</strong></p>
+      <p>Всего в ЛБ: <strong>{{ leaderboard.length }}</strong> чел.</p>
+      <p>В текущей группе: <strong>{{ filteredLeaderboard.length }}</strong> чел.</p>
+      <p>Статус: {{ loading ? 'Загрузка...' : 'Готово' }}</p>
     </div>
 
-    <!-- Кнопка принудительной перезагрузки -->
-    <button @click="loadData()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm font-medium">
+    <button @click="loadData()" class="bg-white text-red-600 font-bold px-5 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition">
       Перезагрузить данные
     </button>
   </div>
 
-  <div v-if="loading" class="flex justify-center items-center py-20">
+  <!-- Лоадер -->
+  <div v-if="loading" class="flex justify-center items-center py-32">
     <div class="text-center">
-      <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-indigo-600 border-t-transparent mb-4"></div>
-      <p class="text-xl text-gray-600">Загружаем таблицы лидеров...</p>
+      <div class="inline-block animate-spin rounded-full h-16 w-16 border-8 border-indigo-600 border-t-transparent mb-6"></div>
+      <p class="text-2xl text-gray-700">Загружаем лидерборды...</p>
     </div>
   </div>
 
   <div v-else class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <h1 class="text-3xl font-bold text-center mb-8 text-gray-900">
-      Таблица лидеров по очкам
-    </h1>
+    <h1 class="text-4xl font-bold text-center mb-10 text-gray-900">Таблица лидеров по очкам</h1>
 
     <!-- Переключатель ролей -->
-    <div class="flex justify-center mb-10">
-      <div class="inline-flex rounded-lg shadow-lg bg-white p-1" role="group">
+    <div class="flex justify-center mb-12">
+      <div class="inline-flex rounded-xl shadow-2xl bg-white p-2" role="group">
         <button
           v-for="tab in tabs"
           :key="tab.role"
           @click="selectedRole = tab.role"
-          :class="[
-            'px-6 py-3 text-sm font-medium rounded-md transition-all duration-200',
-            selectedRole === tab.role
-              ? 'bg-indigo-600 text-white shadow-md'
-              : 'text-gray-700 hover:bg-gray-100'
-          ]"
+          class="px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 flex items-center space-x-3"
+          :class="selectedRole === tab.role ? 'bg-indigo-600 text-white shadow-lg' : 'text-gray-700 hover:bg-gray-100'"
         >
-          {{ tab.label }}
-          <span class="ml-2 font-bold">({{ countByRole(tab.role) }})</span>
+          <span>{{ tab.label }}</span>
+          <span class="text-sm font-bold opacity-80">({{ countByRole(tab.role) }})</span>
         </button>
       </div>
     </div>
 
-    <!-- Если данных нет вообще — покажем предупреждение -->
-    <div v-if="leaderboard.length === 0" class="text-center py-20">
-      <div class="bg-yellow-100 border border-yellow-400 text-yellow-800 px-8 py-6 rounded-xl max-w-2xl mx-auto">
-        <p class="text-2xl font-bold mb-2">Нет данных по баллам</p>
-        <p>Проверьте, есть ли записи в <code>Energy Point Log</code> и правильно ли загружаются роли.</p>
-        <button @click="loadData()" class="mt-4 bg-yellow-600 text-white px-6 py-3 rounded hover:bg-yellow-700">
-          Попробовать снова
-        </button>
-      </div>
-    </div>
+    <!-- Карточки: Ваш результат + Лучший -->
+    <section class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
+      <!-- Ваш результат -->
+      <div class="bg-white rounded-2xl shadow-2xl p-10 border-2 border-gray-200 relative overflow-hidden">
+        <h2 class="text-3xl font-bold text-gray-800 mb-8">Ваш результат</h2>
 
-    <div v-else>
-      <!-- Карточки -->
-      <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
-        <!-- Ваш результат -->
-        <div class="bg-white rounded-xl shadow-xl p-8 border border-gray-200">
-          <h2 class="text-2xl font-semibold text-gray-800 mb-6">Ваш результат</h2>
-
-          <div v-if="currentUserInGroup" class="text-center">
-            <img :src="currentUserStatusIcon" class="w-24 h-24 mx-auto mb-4">
-            <p :class="['text-3xl font-bold mb-3', currentUserStatusClass]">
-              {{ currentUserStatusLabel }}
-            </p>
-            <p class="text-4xl font-bold text-indigo-600 mt-6">
-              {{ currentUserGroupPoints }} баллов
-            </p>
-          </div>
-          <div v-else class="text-center text-gray-500">
-            <p class="text-xl">Вы не входите в группу «{{ selectedRole }}»</p>
-            <p class="text-4xl font-bold text-gray-400 mt-4">{{ currentUserGroupPoints }} баллов</p>
-          </div>
+        <div v-if="currentUserInGroup" class="text-center">
+          <img :src="currentUserStatusIcon" class="w-28 h-28 mx-auto mb-6">
+          <p :class="['text-4xl font-bold mb-4', currentUserStatusClass]">{{ currentUserStatusLabel }}</p>
+          <p v-if="currentUserGroupPosition <= 3" class="text-2xl text-gray-700">
+            {{ currentUserGroupPosition }}-е место в категории
+          </p>
+        </div>
+        <div v-else class="text-center text-gray-500">
+          <p class="text-2xl font-medium">Вы не в этой группе</p>
         </div>
 
-        <!-- Лучший в группе -->
-        <div class="bg-white rounded-xl shadow-xl p-8 border border-gray-200 text-center">
-          <h2 class="text-2xl font-semibold text-gray-800 mb-6">Лучший участник</h2>
-          <div v-if="groupTopUser">
-            <div class="relative inline-block">
-              <div class="w-28 h-28 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-5xl font-bold text-white shadow-2xl">
-                {{ groupTopInitial }}
-              </div>
-              <img src="/leaderboard/gold-cup.png" class="absolute -top-2 -right-4 w-16 h-16">
+        <p class="text-5xl font-extrabold text-center mt-10 text-indigo-600">
+          {{ currentUserGroupPoints }} баллов
+        </p>
+
+        <p v-if="currentUserInGroup && currentUserGroupPosition > 1" class="text-center mt-8 text-xl">
+          До {{ currentUserGroupPosition - 1 }}-го места:
+          <strong class="text-green-600 text-3xl font-bold">{{ pointsToNextInGroup }}</strong> баллов
+        </p>
+      </div>
+
+      <!-- Лучший участник -->
+      <div class="bg-white rounded-2xl shadow-2xl p-10 border-2 border-gray-200 text-center">
+        <h2 class="text-3xl font-bold text-gray-800 mb-8">Лучший участник</h2>
+        <div v-if="groupTopUser" class="space-y-6">
+          <div class="relative inline-block">
+            <div class="w-36 h-36 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-6xl font-bold text-white shadow-2xl">
+              {{ groupTopInitial }}
             </div>
-            <a :href="userProfileLink(groupTopUser.user)" class="block mt-4 text-2xl font-bold text-indigo-600 hover:underline">
-              {{ groupTopUser.full_name }}
-            </a>
-            <p class="text-4xl font-bold text-yellow-500 mt-3">{{ groupTopUser.points }} баллов</p>
+            <img src="/leaderboard/gold-cup.png" class="absolute -top-4 -right-6 w-20 h-20">
           </div>
-          <p v-else class="text-gray-500">Нет участников</p>
+          <a :href="userProfileLink(groupTopUser.user)" class="block text-3xl font-bold text-indigo-600 hover:underline">
+            {{ groupTopUser.full_name }}
+          </a>
+          <p class="text-5xl font-extrabold text-yellow-500">{{ groupTopUser.points }} баллов</p>
         </div>
-      </section>
+        <p v-else class="text-xl text-gray-500">Пока нет участников</p>
+      </div>
+    </section>
 
-      <!-- Таблица -->
-      <section class="bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
-        <div class="px-8 py-6 border-b border-gray-200 bg-gradient-to-r from-indigo-50 to-purple-50">
-          <h2 class="text-2xl font-semibold text-gray-800">
-            Топ — {{ tabs.find(t => t.role === selectedRole)?.title }}
-          </h2>
-        </div>
+    <!-- Таблица -->
+    <section class="bg-white rounded-2xl shadow-2xl border-2 border-gray-200 overflow-hidden">
+      <div class="px-10 py-8 bg-gradient-to-r from-indigo-50 to-purple-50">
+        <h2 class="text-3xl font-bold text-gray-800">
+          Топ — {{ tabs.find(t => t.role === selectedRole)?.title }}
+        </h2>
+      </div>
 
-        <div class="overflow-x-auto">
-          <table class="w-full text-left">
-            <thead class="bg-gray-50">
-              <tr>
-                <th class="px-6 py-4 text-sm font-medium text-gray-700">#</th>
-                <th class="px-6 py-4 text-sm font-medium text-gray-700">Пользователь</th>
-                <th class="px-6 py-4 text-sm font-medium text-gray-700">Баллы</th>
-                <th class="px-6 py-4 text-sm font-medium text-gray-700">Бонус</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200">
-              <tr v-for="(item, index) in filteredLeaderboard" :key="item.user"
-                  :class="item.user === currentUserEmail ? 'bg-indigo-50 font-semibold' : 'hover:bg-gray-50'">
-                <td class="px-6 py-5 text-lg font-bold">{{ index + 1 }}</td>
-                <td class="px-6 py-5">
-                  <div class="flex items-center space-x-4">
-                    <div class="relative">
-                      <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">
-                        {{ getUserInitial(item.user) }}
-                      </div>
-                      <img v-if="index === 0" src="/leaderboard/gold-cup.png" class="absolute -top-3 -right-3 w-10 h-10">
-                      <img v-else-if="index === 1" src="/leaderboard/silver-cup.png" class="absolute -top-3 -right-3 w-10 h-10">
-                      <img v-else-if="index === 2" src="/leaderboard/bronze-cup.png" class="absolute -top-3 -right-3 w-10 h-10">
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-8 py-5 text-left text-sm font-bold text-gray-700">#</th>
+              <th class="px-8 py-5 text-left text-sm font-bold text-gray-700">Участник</th>
+              <th class="px-8 py-5 text-left text-sm font-bold text-gray-700">Баллы</th>
+              <th class="px-8 py-5 text-left text-sm font-bold text-gray-700">Бонус</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr v-for="(item, index) in filteredLeaderboard" :key="item.user"
+                :class="item.user === currentUserEmail ? 'bg-indigo-50 font-bold' : 'hover:bg-gray-50'">
+              <td class="px-8 py-6 text-2xl font-bold text-gray-800">{{ index + 1 }}</td>
+              <td class="px-8 py-6">
+                <div class="flex items-center space-x-5">
+                  <div class="relative">
+                    <div class="w-14 h-14 rounded-full bg-indigo-600 flex items-center justify-center text-white text-2xl font-bold">
+                      {{ getUserInitial(item.user) }}
                     </div>
-                    <a :href="userProfileLink(item.user)" class="text-indigo-600 hover:underline">
-                      {{ item.full_name }}
-                    </a>
+                    <img v-if="index === 0" src="/leaderboard/gold-cup.png" class="absolute -top-4 -right-4 w-12 h-12">
+                    <img v-else-if="index === 1" src="/leaderboard/silver-cup.png" class="absolute -top-4 -right-4 w-12 h-12">
+                    <img v-else-if="index === 2" src="/leaderboard/bronze-cup.png" class="absolute -top-4 -right-4 w-12 h-12">
                   </div>
-                </td>
-                <td class="px-6 py-5 font-medium">{{ item.points }}</td>
-                <td class="px-6 py-5">
-                  <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-bold bg-green-100 text-green-800">
-                    +{{ item.bonus }}
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <a :href="userProfileLink(item.user)" class="text-indigo-600 hover:underline text-lg font-medium">
+                    {{ item.full_name }}
+                  </a>
+                </div>
+              </td>
+              <td class="px-8 py-6 text-xl font-semibold text-gray-900">{{ item.points }}</td>
+              <td class="px-8 py-6">
+                <span class="inline-block px-5 py-2 rounded-full text-lg font-bold bg-green-100 text-green-800">
+                  +{{ item.bonus }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div v-if="filteredLeaderboard.length === 0" class="text-center py-20 text-gray-500 text-2xl">
+          В этой категории пока нет участников с баллами
         </div>
-      </section>
-    </div>
+      </div>
+
+      <div class="px-10 py-6 bg-gray-50 text-sm text-gray-600 italic text-center">
+        * Бонусные баллы: 1 за каждые 100 очков активности (максимум 10)
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
-import { inject, ref, computed, onMounted, watchEffect } from "vue"
+import { inject, ref, computed, onMounted } from "vue"
 import { createResource } from "frappe-ui"
 
 const $user = inject("$user")
 const currentUserEmail = $user.data.email
 const currentUserRoles = computed(() => $user.data.roles || [])
 
-// ДЕБАГ: выводим в консоль при монтировании
-console.log("Текущий пользователь:", currentUserEmail)
-console.log("Роли пользователя:", currentUserRoles.value)
-
 const loading = ref(true)
 const leaderboard = ref([])
 
 const tabs = [
-  { role: "Course Creator", label: "Преподаватели", title: "Преподаватели" },
-  { role: "LMS Student",    label: "Студенты",     title: "Студенты ВУЗа" },
-  { role: "LMS Schoolchild",label: "Школьники",   title: "Школьники" }
+  { role: "Course Creator",    label: "Преподаватели", title: "Преподаватели (Course Creator)" },
+  { role: "LMS Student",       label: "Студенты",      title: "Студенты ВУЗа" },
+  { role: "LMS Schoolchild",   label: "Школьники",     title: "Школьники" }
 ]
 
 const selectedRole = ref("LMS Student")
@@ -184,74 +175,95 @@ const currentUserRole = computed(() => {
   return null
 })
 
-// Автовыбор роли
-watchEffect(() => {
-  if (currentUserRole.value && loading.value === false) {
-    selectedRole.value = currentUserRole.value
-    console.log("Автовыбор роли:", selectedRole.value)
-  }
+// Подсчёт участников по ролям
+const countByRole = (role) => leaderboard.value.filter(u => u.roles.includes(role)).length
+
+// РЕСУРСЫ
+const logsResource = createResource({
+  url: "frappe.client.get_list",
+  params: { doctype: "Energy Point Log", fields: ["user", "points"], limit_page_length: 10000 },
+  auto: false
 })
 
-// Подсчёт по ролям для кнопок
-const countByRole = (role) => {
-  return leaderboard.value.filter(u => u.roles.includes(role)).length
-}
+const usersResource = createResource({
+  url: "frappe.client.get_list",
+  params: {
+    doctype: "User",
+    fields: ["name", "full_name", "username"],
+    filters: [["enabled", "=", 1]],
+    limit_page_length: 2000
+  },
+  auto: false
+})
+
+const userRolesResource = createResource({
+  url: "frappe.client.get_list",
+  params: {
+    doctype: "User Role",
+    fields: ["parent", "role"],
+    filters: [["parenttype", "=", "User"]],
+    limit_page_length: 10000
+  },
+  auto: false
+})
 
-// === ЗАГРУЗКА ДАННЫХ С МАКСИМАЛЬНЫМ ДЕБАГОМ ===
 async function loadData() {
   console.clear()
-  console.log("НАЧИНАЕМ ЗАГРУЗКУ ДАННЫХ...")
+  console.log("ЗАГРУЗКА ЛИДЕРБОРДА...")
 
   try {
     loading.value = true
 
-    const [logsResponse, usersResponse] = await Promise.all([
+    const [logsData, usersData, rolesData] = await Promise.all([
       logsResource.fetch(),
-      usersResource.fetch()
+      usersResource.fetch(),
+      userRolesResource.fetch()
     ])
 
-    console.log("Energy Point Log:", logsResponse)
-    console.log("Users с ролями:", usersResponse)
+    console.log("Energy Point Log:", logsData.length, "записей")
+    console.log("Пользователи:", usersData.length)
+    console.log("Роли (User Role):", rolesData.length, "записей")
 
-    if (!logsResponse || logsResponse.length === 0) {
-      console.warn("ВНИМАНИЕ: Нет записей в Energy Point Log!")
-    }
-    if (!usersResponse || usersResponse.length === 0) {
-      console.warn("ВНИМАНИЕ: Не загружены пользователи!")
-    }
+    // Карта ролей: email → [роли]
+    const roleMap = {}
+    rolesData.forEach(r => {
+      if (!roleMap[r.parent]) roleMap[r.parent] = []
+      roleMap[r.parent].push(r.role)
+    })
 
+    // Карта пользователей
     const usersMap = {}
-    usersResponse.forEach(u => {
+    usersData.forEach(u => {
       usersMap[u.name] = {
         full_name: u.full_name || u.name,
-        username: u.username || u.name.split('@')[0],
-        roles: (u.roles || []).map(r => r.role)
+        username: u.username || u.name.split("@")[0]
       }
     })
 
+    // Суммируем баллы
     const pointsMap = {}
-    logsResponse.forEach(log => {
-      if (!pointsMap[log.user]) pointsMap[log.user] = 0
-      pointsMap[log.user] += log.points
+    logsData.forEach(log => {
+      pointsMap[log.user] = (pointsMap[log.user] || 0) + (log.points || 0)
     })
 
-    console.log("Суммарные баллы по пользователям:", pointsMap)
+    // Формируем лидерборд
+    leaderboard.value = Object.keys(pointsMap)
+      .map(email => {
+        const roles = roleMap[email] || []
+        const info = usersMap[email] || { full_name: email, username: email.split("@")[0] }
+        return {
+          user: email,
+          points: pointsMap[email],
+          full_name: info.full_name,
+          username: info.username,
+          roles,
+          bonus: Math.min(Math.floor(pointsMap[email] / 100), 10)
+        }
+      })
+      .filter(u => u.roles.length > 0)
+      .sort((a, b) => b.points - a.points)
 
-    leaderboard.value = Object.keys(pointsMap).map(user => {
-      const info = usersMap[user] || { full_name: user, username: user, roles: [] }
-      const item = {
-        user,
-        points: pointsMap[user],
-        full_name: info.full_name,
-        username: info.username,
-        roles: info.roles,
-        bonus: Math.min(Math.floor(pointsMap[user] / 100), 10)
-      }
-      console.log("Добавляем в ЛБ:", item)
-      return item
-    }).sort((a, b) => b.points - a.points)
-
-    console.log("ФИНАЛЬНЫЙ ЛИДЕРБОРД:", leaderboard.value)
+    console.log("Финальный лидерборд:", leaderboard.value)
 
   } catch (err) {
     console.error("ОШИБКА ЗАГРУЗКИ:", err)
@@ -260,39 +272,16 @@ async function loadData() {
   }
 }
 
-// Ресурсы
-const logsResource = createResource({
-  url: "frappe.client.get_list",
-  params: { doctype: "Energy Point Log", fields: ["user", "points"], limit_page_length: 10000 },
-  auto: false,
-  onError: (err) => console.error("Ошибка загрузки Energy Point Log:", err)
-})
-
-const usersResource = createResource({
-  url: "frappe.client.get_list",
-  params: {
-    doctype: "User",
-    fields: ["name", "full_name", "username", "roles"],
-    filters: [["enabled", "=", 1]],
-    limit_page_length: 2000
-  },
-  auto: false,
-  onError: (err) => console.error("Ошибка загрузки Users:", err)
-})
-
-// Остальные computed без изменений
+// Computed
 const filteredLeaderboard = computed(() =>
   leaderboard.value.filter(u => u.roles.includes(selectedRole.value))
 )
 
 const currentUserInGroup = computed(() => currentUserRole.value === selectedRole.value)
-const currentUserGroupPoints = computed(() => {
-  const u = leaderboard.value.find(x => x.user === currentUserEmail)
-  return u?.points || 0
-})
+const currentUserGroupPoints = computed(() => leaderboard.value.find(u => u.user === currentUserEmail)?.points || 0)
 const currentUserGroupPosition = computed(() => {
   if (!currentUserInGroup.value) return null
-  const idx = filteredLeaderboard.value.findIndex(x => x.user === currentUserEmail)
+  const idx = filteredLeaderboard.value.findIndex(u => u.user === currentUserEmail)
   return idx >= 0 ? idx + 1 : null
 })
 const pointsToNextInGroup = computed(() => {
@@ -300,7 +289,11 @@ const pointsToNextInGroup = computed(() => {
   const prev = filteredLeaderboard.value[currentUserGroupPosition.value - 2]
   return prev.points - currentUserGroupPoints.value
 })
-const currentUserStatusLabel = computed(() => {/* ... как раньше ... */ return "Чемпион" })
+const currentUserStatusLabel = computed(() => {
+  const pos = currentUserGroupPosition.value
+  if (!pos) return "Стремитесь выше"
+  return pos === 1 ? "Чемпион" : pos === 2 ? "Второе место" : pos === 3 ? "Третье место" : pos <= 10 ? `В топ-${pos <= 5 ? 5 : 10}` : "Стремитесь выше"
+})
 const currentUserStatusIcon = computed(() => {
   const pos = currentUserGroupPosition.value
   if (pos === 1) return "/leaderboard/gold-cup.png"
@@ -324,8 +317,10 @@ function userProfileLink(email) {
   return u ? `/lms/user/${u.username}` : "#"
 }
 
-onMounted(() => {
-  console.log("Компонент смонтирован — запускаем загрузку")
-  loadData()
+onMounted(async () => {
+  await loadData()
+  if (currentUserRole.value) {
+    selectedRole.value = currentUserRole.value
+  }
 })
 </script>