diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx
index 703c896..37700ab 100644
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@@ -11,6 +11,7 @@ import {
   Heading,
   Stack,
   useColorMode,
+  Flex,
 } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 
@@ -202,7 +203,8 @@ const LessonDetail = () => {
       }
     }
 
-    return allStudents.sort((a, b) => (a.present ? -1 : 1))
+    // Removing the sorting to prevent reordering animation
+    return allStudents
   }, [accessCode?.body, AllStudents.data, prevPresentStudentsRef.current])
 
   // Функция для определения цвета на основе посещаемости
@@ -298,35 +300,82 @@ const LessonDetail = () => {
                   {studentsArr.map((student) => (
                     <motion.li
                       key={student.sub}
-                      layout
-                      initial={{ opacity: 0, scale: 0.8 }}
                       animate={{ 
-                        opacity: 1, 
-                        scale: 1,
-                        // Добавляем подсветку для недавно отметившихся студентов
+                        rotateY: student.present ? 0 : 180,
                         boxShadow: student.recentlyPresent 
                           ? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)'] 
                           : '0 0 0 0 rgba(0, 0, 0, 0)'
                       }}
-                      exit={{ opacity: 0, scale: 0.8 }}
                       transition={{ 
-                        type: "spring", 
-                        stiffness: 300, 
-                        damping: 30,
-                        layout: { duration: 0.4 },
+                        rotateY: { type: "spring", stiffness: 300, damping: 20 },
                         boxShadow: {
                           repeat: student.recentlyPresent ? 3 : 0,
                           duration: 1.5
                         }
                       }}
+                      style={{ 
+                        transformStyle: "preserve-3d",
+                        perspective: "1000px"
+                      }}
                     >
-                      <UserCard
-                        wrapperAS="div"
-                        student={student}
-                        present={student.present}
-                        recentlyPresent={student.recentlyPresent}
-                        onAddUser={(user: User) => manualAdd({ lessonId, user })}
-                      />
+                      {/* Front side - visible when present */}
+                      <Box 
+                        position="relative" 
+                        width="100%" 
+                        height="100%"
+                        style={{
+                          transformStyle: "preserve-3d"
+                        }}
+                      >
+                        <Box
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(0deg)",
+                            zIndex: student.present ? 1 : 0
+                          }}
+                        >
+                          <UserCard
+                            wrapperAS="div"
+                            student={student}
+                            present={student.present}
+                            recentlyPresent={student.recentlyPresent}
+                            onAddUser={(user: User) => manualAdd({ lessonId, user })}
+                          />
+                        </Box>
+                        
+                        {/* Back side - visible when not present */}
+                        <Flex
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          bg={colorMode === "light" ? "gray.100" : "gray.600"}
+                          borderRadius="md"
+                          align="center"
+                          justify="center"
+                          p={4}
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(180deg)",
+                            zIndex: student.present ? 0 : 1
+                          }}
+                        >
+                          <Box textAlign="center">
+                            <Box fontSize="sm" fontWeight="medium">
+                              {student.name || student.lastName}
+                            </Box>
+                            <Box fontSize="xs" opacity={0.8}>
+                              {t('journal.pl.lesson.notMarked')}
+                            </Box>
+                          </Box>
+                        </Flex>
+                      </Box>
                     </motion.li>
                   ))}
                 </AnimatePresence>