diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 6a5f3b93..d1910b06 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -665,8 +665,7 @@ const addMyPoints = () => {
 		sidebarLinks.value.push({
 			label: __('My points'),
 			icon: 'Award',
-			to: 'my_points',
-			external: true,
+			to: 'mypoints',
 			activeFor: [],
 		})
 	}
@@ -677,8 +676,7 @@ const addLeaderBoard = () => {
  		sidebarLinks.value.push({
  			label: __('Leader Board'),
  			icon: 'Trophy',
- 			to: 'leaderboardsample',
- 			external: true,
+ 			to: 'leaderboard',
  			activeFor: [],
  		})
  	}
diff --git a/frontend/src/pages/LeaderBoard.vue b/frontend/src/pages/LeaderBoard.vue
index caa4b75f..14cc7fad 100644
--- a/frontend/src/pages/LeaderBoard.vue
+++ b/frontend/src/pages/LeaderBoard.vue
@@ -1,288 +1,439 @@
 <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="min-h-screen p-6">
+    <!-- Заголовок -->
+    <div class="text-center mb-8">
+      <h1 class="text-3xl font-bold text-gray-800 mb-2">Таблица лидеров</h1>
+      <p class="text-gray-600">Рейтинг участников по набранным очкам</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>
-  </div>
-
-  <div v-if="loading" class="flex justify-center items-center py-20">
-    <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>
-  </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>
-
-    <!-- Переключатель ролей -->
-    <div class="flex justify-center mb-10">
-      <div class="inline-flex rounded-lg shadow-lg bg-white p-1" 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' ]"
-        >
-          {{ tab.label }}
-          <span class="ml-2 font-bold">({{ 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>
-
-    <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>
-
-        <!-- Лучший в группе -->
-        <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">
+    <!-- Карточка текущего пользователя и лучшего в группе -->
+    <div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+      <!-- Карточка текущего пользователя -->
+      <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-teal-600">
+        <h3 class="text-lg font-semibold text-gray-800 mb-4">Ваша позиция</h3>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-4">
+            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+              <span class="text-blue-600 font-bold text-lg">
+                {{ currentUserInitial }}
+              </span>
+            </div>
+            <div>
+              <a
+                :href="`/lms/user/${currentUser.username}`"
+                class="font-semibold text-gray-800 hover:text-blue-600 transition-colors"
+              >
+                {{ currentUser.full_name }}
+              </a>
+              <p class="text-sm text-gray-500">{{ currentUser.username }}</p>
             </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>
           </div>
-          <p v-else class="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 class="text-right">
+            <div class="text-2xl font-bold text-gray-800">
+              #{{ currentUserPosition }}
+            </div>
+            <div class="text-sm text-gray-500">место</div>
+          </div>
         </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>
-                    <a :href="userProfileLink(item.user)" class="text-indigo-600 hover:underline">
-                      {{ item.full_name }}
-                    </a>
-                  </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>
+        <!-- Прогресс до следующего места -->
+        <div v-if="pointsToNext > 0" class="mt-4 p-3 bg-blue-50 rounded-lg">
+          <div class="text-sm text-gray-600 mb-1">
+            До {{ nextPosition }} места нужно:
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-lg font-bold text-blue-600">+{{ pointsToNext }} очков</span>
+            <span class="text-sm text-gray-500">
+              {{ nextPositionPoints - currentUser.points }} осталось
+            </span>
+          </div>
         </div>
-      </section>
+        <div v-else class="mt-4 p-3 bg-green-50 rounded-lg">
+          <div class="text-sm text-green-600 font-semibold">
+            🎉 Вы занимаете первое место в своей группе!
+          </div>
+        </div>
+      </div>
+
+      <!-- Карточка лучшего в группе -->
+      <div class="bg-gradient-to-r from-yellow-400 to-orange-400 rounded-xl shadow-lg p-6 text-white">
+        <h3 class="text-lg font-semibold mb-4">Лучший в категории</h3>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-4">
+            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
+              <span class="font-bold text-lg">👑</span>
+            </div>
+            <div>
+              <a
+                v-if="topUserInGroup"
+                :href="`/lms/user/${topUserInGroup.username}`"
+                class="font-semibold hover:underline transition-colors"
+              >
+                {{ topUserInGroup.full_name }}
+              </a>
+              <!--<p class="text-sm text-opacity-80" v-if="topUserInGroup">
+                {{ topUserInGroup.username }}
+              </p>-->
+            </div>
+          </div>
+          <div class="text-right">
+            <div class="text-2xl font-bold">{{ topUserInGroup?.points || 0 }}</div>
+            <div class="text-sm text-opacity-80">очков</div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!-- Переключение групп -->
+    <div class="flex justify-center mb-8">
+      <div class="bg-white rounded-lg shadow-sm p-1 flex space-x-1">
+        <button
+          v-for="group in roleGroups"
+          :key="group.role"
+          @click="activeGroup = group.role"
+          :class="[
+            'px-4 py-2 rounded-md text-sm font-medium transition-all duration-200',
+            activeGroup === group.role
+              ? getGroupButtonClass(group.role)
+              : 'text-gray-600 hover:text-gray-800 hover:bg-gray-100'
+          ]"
+        >
+          {{ group.label }}
+        </button>
+      </div>
+    </div>
+
+		<!-- Статистика -->
+    <div class="max-w-5xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+      <div
+        v-for="group in roleGroups"
+        :key="group.role"
+        class="bg-white rounded-lg shadow-sm p-4 border-l-4 cursor-pointer hover:shadow-md transition-shadow"
+        :class="getGroupBorderClass(group.role)"
+        @click="activeGroup = group.role"
+      >
+        <h3 class="font-semibold text-gray-700 mb-2">{{ group.label }}</h3>
+        <p class="text-2xl font-bold text-gray-800">
+          {{ getGroupStats(group.role).count }}
+        </p>
+        <p class="text-sm text-gray-500">участников</p>
+      </div>
+    </div>
+
+    <!-- Таблица лидеров -->
+    <div class="max-w-5xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
+      <!-- Заголовок таблицы -->
+      <div :class="['px-6 py-4 bg-gradient-to-r', getGroupGradientClass(activeGroup)]">
+        <h2 class="text-xl font-bold text-white">
+          {{ activeGroupLabel }} - Топ {{ currentLeaderboard.length }}
+        </h2>
+				<!-- Примечание о бонусах только для школьников -->
+				<p v-if="activeGroup === 'LMS Schoolchild'" class="text-white text-opacity-90 text-sm mt-1">
+					* Бонусные баллы рассчитываются как 1 балл за каждые 100 очков активности (максимум 10)
+				</p>
+      </div>
+
+      <!-- Список участников -->
+      <div class="divide-y divide-gray-100">
+        <div
+          v-for="(user, index) in currentLeaderboard"
+          :key="user.user"
+          class="px-6 py-4 hover:bg-gray-50 transition-colors duration-150"
+        >
+          <div class="flex items-center justify-between">
+            <!-- Место и информация -->
+            <div class="flex items-center space-x-4">
+              <!-- Место -->
+              <div
+                :class="[
+                  'w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm',
+                  index === 0 ? 'bg-yellow-400' :
+                  index === 1 ? 'bg-gray-400' :
+                  index === 2 ? 'bg-orange-400' : 'bg-blue-400'
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+
+              <!-- Аватар и имя -->
+              <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                  <span class="text-blue-600 font-bold text-sm">
+                    {{ getUserInitial(user) }}
+                  </span>
+                </div>
+                <div>
+                  <a
+                    :href="`/lms/user/${user.username}`"
+                    class="font-semibold text-gray-800 hover:text-blue-600 transition-colors"
+                  >
+                    {{ user.full_name }}
+                  </a>
+                  <!--<p class="text-sm text-gray-500">{{ user.username }}</p>-->
+                </div>
+              </div>
+            </div>
+
+            <!-- Очки и бонусы -->
+						<div class="flex items-center space-x-6">
+							<!-- Бонусы (только для школьников) -->
+							<div v-if="user.isSchoolchild && user.bonus > 0" class="text-center">
+								<div class="text-xs text-gray-500 mb-1">Бонус</div>
+								<div class="flex items-center space-x-1">
+									<span class="text-lg font-bold text-orange-500">{{ user.bonus }}</span>
+									<span class="text-orange-400">⭐</span>
+								</div>
+							</div>
+
+							<!-- Очки -->
+							<div class="text-center">
+								<div class="text-xs text-gray-500 mb-1">Очки</div>
+								<div class="text-xl font-bold text-gray-800">{{ user.points }}</div>
+							</div>
+						</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Пустое состояние -->
+      <div
+        v-if="currentLeaderboard.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        <div class="text-6xl mb-4">🏆</div>
+        <p class="text-lg">Пока нет участников в этой категории</p>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script setup>
-import { inject, ref, computed, onMounted, watchEffect } from "vue"
-import { createResource } from "frappe-ui"
+import { computed, onMounted, ref, watch } from 'vue'
 import { usersStore } from '@/stores/user'
-import { sessionStore } from '@/stores/session'
+import { createResource } from 'frappe-ui'
 
-const $user = inject("$user")
-const currentUserEmail = $user.data.email
-const currentUserRoles = computed(() => $user.data.roles || [])
+const store = usersStore()
+const { userResource, allUsers } = store
 
-const { userResource } = usersStore()
-const { user } = sessionStore()
-
-const loading = ref(true)
-const leaderboard = ref([])
-
-const tabs = [
-  { role: "Course Creator", label: "Преподаватели", title: "Преподаватели" },
-  { role: "LMS Student",    label: "Студенты",     title: "Студенты ВУЗа" },
-  { role: "LMS Schoolchild",label: "Школьники",   title: "Школьники" }
+// Группы ролей которые нас интересуют
+const roleGroups = [
+  { role: 'LMS Student', label: 'Студенты' },
+  { role: 'Course Creator', label: 'Преподаватели' },
+  { role: 'LMS Schoolchild', label: 'Школьники' }
 ]
 
-const selectedRole = ref("LMS Student")
-
-const currentUserRole = computed(() => {
-  if (currentUserRoles.value.includes("Course Creator")) return "Course Creator"
-  if (currentUserRoles.value.includes("LMS Student")) return "LMS Student"
-  if (currentUserRoles.value.includes("LMS Schoolchild")) return "LMS Schoolchild"
-  return null
-})
-
-// Автовыбор роли
-watchEffect(() => {
-  if (currentUserRole.value && !loading.value) selectedRole.value = currentUserRole.value
-})
-
-// Получаем роли пользователя безопасно
-function getRolesByEmail(email) {
-  if (!userResource.data || !Array.isArray(userResource.data)) return []
-  const u = userResource.data.find(u => u.name === email)
-  return u?.roles || []
+// Определяем группу текущего пользователя
+function getUserRoleGroup(userRoles) {
+  if (!userRoles) return 'LMS Student'
+  const validRole = userRoles.find(role =>
+    roleGroups.some(group => group.role === role)
+  )
+  return validRole || 'LMS Student'
 }
 
-// Подсчёт по ролям для табов
-const countByRole = (role) => {
-  if (!userResource.data || !Array.isArray(userResource.data)) return 0
-  return userResource.data.filter(u => u.roles.includes(role)).length
-}
+const activeGroup = ref('LMS Student')
 
-// Фильтруем leaderboard по выбранной роли
-const filteredLeaderboard = computed(() => {
-  if (!userResource.data || !Array.isArray(userResource.data)) return []
-  return leaderboard.value
-    .map(u => ({ ...u, roles: getRolesByEmail(u.user) }))
-    .filter(u => u.roles.includes(selectedRole.value))
-})
+const usersList = computed(() => allUsers.data || [])
+const usersCount = computed(() => usersList.value.length)
 
-
-const currentUserInGroup = computed(() => currentUserRole.value === selectedRole.value)
-const currentUserGroupPoints = computed(() => {
-  const u = leaderboard.value.find(x => x.user === currentUserEmail)
-  return u?.points || 0
-})
-const currentUserGroupPosition = computed(() => {
-  if (!currentUserInGroup.value) return null
-  const idx = filteredLeaderboard.value.findIndex(x => x.user === currentUserEmail)
-  return idx >= 0 ? idx + 1 : null
-})
-const currentUserStatusLabel = computed(() => "Чемпион")
-const currentUserStatusIcon = computed(() => {
-  const pos = currentUserGroupPosition.value
-  if (pos === 1) return "/leaderboard/gold-cup.png"
-  if (pos === 2) return "/leaderboard/silver-cup.png"
-  if (pos === 3) return "/leaderboard/bronze-cup.png"
-  return "/leaderboard/dart-board.svg"
-})
-const currentUserStatusClass = computed(() => {
-  const pos = currentUserGroupPosition.value
-  if (pos === 1) return "text-yellow-500"
-  if (pos === 2) return "text-gray-500"
-  if (pos === 3) return "text-orange-600"
-  return "text-indigo-600"
-})
-
-const groupTopUser = computed(() => filteredLeaderboard.value[0] || null)
-const groupTopInitial = computed(() => groupTopUser.value?.user[0].toUpperCase() || "N/A")
-function getUserInitial(email) { return email?.[0].toUpperCase() || "?" }
-function userProfileLink(email) {
-  const u = leaderboard.value.find(x => x.user === email)
-  return u ? `/lms/user/${u.username}` : "#"
-}
-
-// Ресурс для логов очков
 const logsResource = createResource({
   url: "frappe.client.get_list",
-  params: { doctype: "Energy Point Log", fields: ["user", "points"], limit_page_length: 10000 },
+  params: {
+    doctype: "Energy Point Log",
+    fields: ["user", "points"],
+    limit_page_length: 10000
+  },
   auto: false,
   onError: (err) => console.error("Ошибка загрузки Energy Point Log:", err)
 })
 
-async function loadData() {
-  console.clear()
-  console.log("Загрузка данных...")
+const leaderboard = ref([])
 
-  loading.value = true
-  try {
-		await userResource.fetch()
-    const logsResponse = await logsResource.fetch()
+// Текущий пользователь
+const currentUser = computed(() => {
+  return userResource.data || {}
+})
 
-    const pointsMap = {}
-    logsResponse.forEach(log => {
-      if (!pointsMap[log.user]) pointsMap[log.user] = 0
-      pointsMap[log.user] += log.points
-    })
+// Инициалы текущего пользователя
+const currentUserInitial = computed(() => {
+  if (currentUser.value.full_name) {
+    return currentUser.value.full_name.charAt(0).toUpperCase()
+  }
+  return currentUser.value.name?.charAt(0).toUpperCase() || 'U'
+})
+
+// Получить инициалы пользователя
+function getUserInitial(user) {
+  return user.full_name?.charAt(0).toUpperCase() || user.username?.charAt(0).toUpperCase() || 'U'
+}
+
+// Устанавливаем активную группу на основе ролей текущего пользователя
+watch([currentUser, usersList], () => {
+  if (currentUser.value.roles && usersList.value.length > 0) {
+    const userGroup = getUserRoleGroup(currentUser.value.roles)
+    activeGroup.value = userGroup
+  }
+})
+
+// Активная группа label
+const activeGroupLabel = computed(() => {
+  const group = roleGroups.find(g => g.role === activeGroup.value)
+  return group ? group.label : ''
+})
+
+// Текущий лидерборд для активной группы
+const currentLeaderboard = computed(() => {
+  return leaderboard.value
+    .filter(user => user.roles.includes(activeGroup.value))
+    .slice(0, 50)
+})
+
+// Лучший пользователь в активной группе
+const topUserInGroup = computed(() => {
+  return currentLeaderboard.value[0]
+})
+
+// Позиция текущего пользователя в активной группе
+const currentUserPosition = computed(() => {
+  const userInLeaderboard = currentLeaderboard.value.findIndex(
+    user => user.user === currentUser.value.name
+  )
+  return userInLeaderboard !== -1 ? userInLeaderboard + 1 : '-'
+})
+
+// Очки текущего пользователя
+const currentUserPoints = computed(() => {
+  const userEntry = leaderboard.value.find(user => user.user === currentUser.value.name)
+  return userEntry ? userEntry.points : 0
+})
+
+// Очки до следующего места
+const pointsToNext = computed(() => {
+  const userIndex = currentLeaderboard.value.findIndex(
+    user => user.user === currentUser.value.name
+  )
+
+  if (userIndex === -1 || userIndex === 0) return 0
+
+  const currentUserPoints = currentLeaderboard.value[userIndex].points
+  const nextUserPoints = currentLeaderboard.value[userIndex - 1].points
+
+  return nextUserPoints - currentUserPoints + 1
+})
+
+// Следующая позиция
+const nextPosition = computed(() => {
+  const userIndex = currentLeaderboard.value.findIndex(
+    user => user.user === currentUser.value.name
+  )
+  return userIndex > 0 ? userIndex : 1
+})
+
+// Очки следующего пользователя
+const nextPositionPoints = computed(() => {
+  const userIndex = currentLeaderboard.value.findIndex(
+    user => user.user === currentUser.value.name
+  )
+  return userIndex > 0 ? currentLeaderboard.value[userIndex - 1].points : currentUserPoints.value
+})
+
+// Классы для групп
+function getGroupButtonClass(role) {
+  const classes = {
+    'LMS Student': 'bg-teal-400 text-white shadow-md',
+    'Course Creator': 'bg-teal-600 text-white shadow-md',
+    'LMS Schoolchild': 'bg-teal-200 text-white shadow-md'
+  }
+  return classes[role] || 'bg-blue-500 text-white shadow-md'
+}
+
+function getGroupGradientClass(role) {
+  const classes = {
+    'LMS Student': 'from-teal-400 to-teal-500',
+    'Course Creator': 'from-teal-600 to-teal-700',
+    'LMS Schoolchild': 'from-teal-300 to-teal-400'
+  }
+  return classes[role] || 'from-blue-500 to-blue-600'
+}
+
+function getGroupBorderClass(role) {
+  const classes = {
+    'LMS Student': 'border-teal-400',
+    'Course Creator': 'border-teal-600',
+    'LMS Schoolchild': 'border-teal-300'
+  }
+  return classes[role] || 'border-blue-400'
+}
+
+// Статистика по группам
+function getGroupStats(role) {
+  const groupUsers = leaderboard.value.filter(user => user.roles.includes(role))
+  return {
+    count: groupUsers.length,
+    totalPoints: groupUsers.reduce((sum, user) => sum + user.points, 0)
+  }
+}
+
+function calculateLeaderboard() {
+  if (!logsResource.data) return
+
+  const pointsMap = {}
+
+  // Считаем сумму очков для каждого пользователя
+  logsResource.data.forEach(log => {
+    if (!pointsMap[log.user]) pointsMap[log.user] = 0
+    pointsMap[log.user] += log.points
+  })
+
+  // Создаем leaderboard только для пользователей с нужными ролями
+  leaderboard.value = Object.keys(pointsMap)
+    .map(user => {
+      const u = usersList.value.find(x => x.name === user)
+
+      // Пропускаем пользователей без данных или без нужных ролей
+      if (!u) return null
+
+      // Проверяем есть ли у пользователя нужные роли
+      const hasValidRole = u.roles && u.roles.some(role =>
+        roleGroups.some(group => group.role === role)
+      )
+
+      if (!hasValidRole) return null
+
+      // Пропускаем пользователей с отрицательными или нулевыми баллами
+      if (pointsMap[user] < 0) return null
+
+      // Определяем является ли пользователь школьником
+      const isSchoolchild = u.roles.includes('LMS Schoolchild')
+
+      // Вычисляем бонус только для школьников
+      const bonus = isSchoolchild ? Math.min(Math.floor(pointsMap[user] / 100), 10) : 0
 
-    leaderboard.value = Object.keys(pointsMap).map(user => {
-      const u = userResource.data?.find(x => x.name === user) || { full_name: user, username: user.split('@')[0], roles: [] }
       return {
         user,
         points: pointsMap[user],
         full_name: u.full_name,
         username: u.username,
-        roles: u.roles,
-        bonus: Math.min(Math.floor(pointsMap[user]/100), 10)
+        roles: u.roles || [],
+        bonus: bonus,
+        isSchoolchild: isSchoolchild  // Добавляем флаг для удобства
       }
-    }).sort((a,b) => b.points - a.points)
-
-    console.log("Leaderboard:", leaderboard.value)
-  } catch(err) {
-    console.error("Ошибка загрузки:", err)
-  } finally {
-    loading.value = false
-  }
+    })
+    .filter(user => user !== null)
+    .sort((a, b) => b.points - a.points)
 }
 
-onMounted(() => loadData())
+onMounted(async () => {
+  await allUsers.reload()
+  await logsResource.reload()
+  calculateLeaderboard()
+})
 </script>
+
+<style scoped>
+/* Плавные переходы */
+button, .hover\:bg-gray-50 {
+  transition: all 0.2s ease-in-out;
+}
+</style>
diff --git a/frontend/src/pages/MyPoints.vue b/frontend/src/pages/MyPoints.vue
index 481b8ccc..6df30963 100644
--- a/frontend/src/pages/MyPoints.vue
+++ b/frontend/src/pages/MyPoints.vue
@@ -135,8 +135,8 @@ const additionalPoints = computed(() => {
 })
 
 const breadcrumbs = computed(() => [
-  { label: 'Главная', route: '/' },
-  { label: 'Мои баллы' }
+  { label: __('Home'), route: '/' },
+  { label: __('My Points') }
 ])
 
 const showAll = ref(false)