diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx
index 37700ab..056e09b 100644
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@@ -315,7 +315,10 @@ const LessonDetail = () => {
                       }}
                       style={{ 
                         transformStyle: "preserve-3d",
-                        perspective: "1000px"
+                        perspective: "1000px",
+                        aspectRatio: "1",
+                        width: "100%",
+                        display: "block"
                       }}
                     >
                       {/* Front side - visible when present */}
@@ -356,21 +359,98 @@ const LessonDetail = () => {
                           width="100%"
                           height="100%"
                           bg={colorMode === "light" ? "gray.100" : "gray.600"}
-                          borderRadius="md"
+                          borderRadius="12px"
                           align="center"
                           justify="center"
                           p={4}
+                          overflow="hidden"
                           style={{
                             backfaceVisibility: "hidden",
                             transform: "rotateY(180deg)",
-                            zIndex: student.present ? 0 : 1
+                            zIndex: student.present ? 0 : 1,
+                            aspectRatio: "1"
                           }}
                         >
-                          <Box textAlign="center">
-                            <Box fontSize="sm" fontWeight="medium">
-                              {student.name || student.lastName}
+                          <Box 
+                            position="absolute"
+                            top="0"
+                            left="0"
+                            right="0"
+                            bottom="0"
+                            opacity="0.2"
+                            className="animated-bg"
+                            sx={{
+                              background: `linear-gradient(135deg, 
+                                ${colorMode === "light" ? "#e3f2fd, #bbdefb, #90caf9" : "#1a365d, #2a4365, #2c5282"})`,
+                              backgroundSize: "400% 400%",
+                              animation: "gradientAnimation 8s ease infinite",
+                              "@keyframes gradientAnimation": {
+                                "0%": { backgroundPosition: "0% 50%" },
+                                "50%": { backgroundPosition: "100% 50%" },
+                                "100%": { backgroundPosition: "0% 50%" }
+                              }
+                            }}
+                          />
+                          <Box 
+                            position="relative" 
+                            textAlign="center"
+                            zIndex="1"
+                          >
+                            <Box 
+                              width="60px" 
+                              height="60px" 
+                              mx="auto" 
+                              mb={2}
+                              sx={{
+                                animation: "float 3s ease-in-out infinite",
+                                "@keyframes float": {
+                                  "0%": { transform: "translateY(0px)" },
+                                  "50%": { transform: "translateY(-10px)" },
+                                  "100%": { transform: "translateY(0px)" }
+                                }
+                              }}
+                            >
+                              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                {/* Академическая шапочка */}
+                                <path 
+                                  d="M12 2L2 6.5L12 11L22 6.5L12 2Z" 
+                                  fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
+                                />
+                                <path 
+                                  d="M19 9V14.5C19 15.163 18.6839 15.7989 18.1213 16.2678C17.0615 17.1301 13.7749 19 12 19C10.2251 19 6.93852 17.1301 5.87868 16.2678C5.31607 15.7989 5 15.163 5 14.5V9L12 12.5L19 9Z" 
+                                  fill={colorMode === "light" ? "#2C5282" : "#4299E1"}
+                                />
+                                <path 
+                                  d="M21 7V14M21 14L19 16M21 14L23 16" 
+                                  stroke={colorMode === "light" ? "#2C5282" : "#4299E1"}
+                                  strokeWidth="1.5"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                                
+                                {/* Лицо студента */}
+                                <circle 
+                                  cx="12" 
+                                  cy="15" 
+                                  r="2.5" 
+                                  fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
+                                />
+                                
+                                {/* Тело студента */}
+                                <path 
+                                  d="M8 18.5C8 17.1193 9.11929 16 10.5 16H13.5C14.8807 16 16 17.1193 16 18.5V21H8V18.5Z" 
+                                  fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
+                                />
+                              </svg>
                             </Box>
-                            <Box fontSize="xs" opacity={0.8}>
+                            <Box fontSize="sm" fontWeight="medium">
+                              {student.name || student.preferred_username}
+                            </Box>
+                            <Box 
+                              fontSize="xs" 
+                              opacity={0.8}
+                              color={colorMode === "light" ? "gray.600" : "gray.300"}
+                            >
                               {t('journal.pl.lesson.notMarked')}
                             </Box>
                           </Box>
diff --git a/src/pages/style.ts b/src/pages/style.ts
index d245088..01d7319 100644
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@@ -22,8 +22,6 @@ export const StudentList = styled.ul`
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 16px;
   width: 100%;
-  max-height: 600px;
-  overflow-y: auto;
   
   @media (max-width: 768px) {
     gap: 12px;