diff --git a/src/pages/lesson/lesson.tsx b/src/pages/lesson/lesson.tsx
index ef9cdd0..86d6707 100644
--- a/src/pages/lesson/lesson.tsx
+++ b/src/pages/lesson/lesson.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { Link as ReactRouterLink, useHistory } from 'react-router-dom';
 import {
@@ -16,6 +16,7 @@ import {
   Icon,
   IconButton,
   useToast,
+  useColorModeValue,
 } from '@chakra-ui/react';
 
 /**
@@ -30,7 +31,7 @@ import { Redirect, useParams } from 'react-router-dom';
 import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
 import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson';
 import LoadingPage from '@educt/components/LoadingPage';
-import { MdCheckCircle, MdOutlineCircle, MdOutlineFilePresent, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
+import { MdOutlineCircle, MdOutlineFilePresent, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { Helmet } from 'react-helmet';
 import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCourseLessons';
@@ -39,28 +40,36 @@ import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCours
  * Lesson Page
  */
 const LessonPage: React.FC<IPageProps> = () => {
+  const {
+    userStore: { me },
+  } = useRootStore();
   const { id } = useParams<{ id: string }>();
   const { error, data: lesson, isLoading } = useFetchLesson(id);
   const { fetchCourseLessons, data: lessons } = useFetchCourseLessons();
   const toast = useToast();
   const history = useHistory();
-  const {
-    userStore: { me },
-  } = useRootStore();
   const [nextLesson, setNextLesson] = useState<ILesson | null>(null);
   const [prevLesson, setPrevLesson] = useState<ILesson | null>(null);
   const [isPageAvailable, setIsPageAvailable] = useState<boolean>(true);
+  const currentLessonRef = useRef<HTMLDivElement | null>(null);
+  const bg = useColorModeValue('gray.50', 'gray.700');
 
   useEffect(() => {
     /**
      * Сheck if the user has access to the lesson
      */
-    const isHasAccess = me?.courses?.some(course => course.id === lesson?.course_id) ?? true;
+    if (me === null || lesson === null) return;
+    const isHasAccess = me.courses?.some(course => course.id === lesson.course_id) ?? true;
 
     if (!isHasAccess) {
       toast({ title: 'You are not able to view this lesson.', status: 'warning' });
       setIsPageAvailable(false);
     }
+  }, []);
+
+  useEffect(() => {
+    currentLessonRef.current?.scrollIntoView({ block: 'center' });
+    window.scrollTo(0, 0);
 
     /**
      * Define next and prev lessons
@@ -104,7 +113,7 @@ const LessonPage: React.FC<IPageProps> = () => {
         <Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
           <GridItem>
             <Box>
-              <Box bg={lesson.color?.hex} minH={'500px'} />
+              <Box bg={lesson.color?.hex} h={{ base: '200px', sm: '350px', lg: '400px', xl: '500' }} />
             </Box>
 
             <Flex justifyContent={'flex-end'} mt='3'>
@@ -133,19 +142,20 @@ const LessonPage: React.FC<IPageProps> = () => {
               <Divider mt='4' />
             </Box>
           </GridItem>
-          <GridItem>
+          <GridItem minWidth={'250px'}>
             <Box>
               <Stack maxH={'500px'} overflowY={'scroll'} spacing={'0'}>
                 {lessons.map((lesson, i) => (
                   <LinkBox
+                    ref={lesson.id === id ? currentLessonRef : undefined}
                     as='div'
                     display={'flex'}
                     key={lesson.id}
-                    bg={lesson.id === id ? 'gray.50' : ''}
+                    bg={lesson.id === id ? bg : ''}
                     p='4'
                     alignItems={'center'}
                     _hover={{
-                      bg: 'gray.50',
+                      bg,
                     }}
                   >
                     <Icon as={MdOutlineCircle} color='gray.500' w={6} h={6} mr='2' />
@@ -169,7 +179,7 @@ const LessonPage: React.FC<IPageProps> = () => {
                 </Text>
                 <Stack>
                   {[1, 2, 3].map(n => (
-                    <Flex key={n} alignItems={'center'} mt='5' p='3' bg='gray.50' borderRadius={'lg'}>
+                    <Flex key={n} alignItems={'center'} mt='5' p='3' bg={bg} borderRadius={'lg'}>
                       <Icon as={MdOutlineFilePresent} mr='2' h={4} w={4} />
                       <Text fontSize={'sm'} fontWeight={'medium'} lineHeight={'1rem'}>
                         lesson-1_sourse-code.zip <br />