diff --git a/frontend/src/pages/Test.vue b/frontend/src/pages/Test.vue
index 716824d3..5133fcc8 100644
--- a/frontend/src/pages/Test.vue
+++ b/frontend/src/pages/Test.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-gray-50 p-6">
+  <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>
@@ -7,9 +7,9 @@
     </div>
 
     <!-- Карточка текущего пользователя и лучшего в группе -->
-    <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+    <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-blue-500">
+      <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-teal-800">
         <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">
@@ -104,7 +104,7 @@
     </div>
 
     <!-- Таблица лидеров -->
-    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
+    <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">
@@ -185,7 +185,7 @@
     </div>
 
     <!-- Статистика -->
-    <div class="max-w-4xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div class="max-w-5xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
       <div
         v-for="group in roleGroups"
         :key="group.role"
@@ -336,27 +336,27 @@ const nextPositionPoints = computed(() => {
 // Классы для групп
 function getGroupButtonClass(role) {
   const classes = {
-    'LMS Student': 'bg-blue-500 text-white shadow-md',
-    'Course Creator': 'bg-green-500 text-white shadow-md',
-    'LMS Schoolchild': 'bg-purple-500 text-white shadow-md'
+    '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-blue-500 to-blue-600',
-    'Course Creator': 'from-green-500 to-green-600',
-    'LMS Schoolchild': 'from-purple-500 to-purple-600'
+    'LMS Student': 'from-teal-300 to-teal-400',
+    'Course Creator': 'from-teal-500 to-teal-600',
+    'LMS Schoolchild': 'from-teal-100 to-teal-200'
   }
   return classes[role] || 'from-blue-500 to-blue-600'
 }
 
 function getGroupBorderClass(role) {
   const classes = {
-    'LMS Student': 'border-blue-400',
-    'Course Creator': 'border-green-400',
-    'LMS Schoolchild': 'border-purple-400'
+    'LMS Student': 'border-teal-400',
+    'Course Creator': 'border-teal-600',
+    'LMS Schoolchild': 'border-teal-200'
   }
   return classes[role] || 'border-blue-400'
 }