diff --git a/src/components/Course/components/Lesson/store/lessons.js b/src/components/Course/components/Lesson/store/lessons.js
index a41dac02..139586ff 100644
--- a/src/components/Course/components/Lesson/store/lessons.js
+++ b/src/components/Course/components/Lesson/store/lessons.js
@@ -1,168 +1,42 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
-export const lessons = writable([
-  {
-    title: 'Вступительное слово. Софт скилы',
-    to: '/courses/1/lessons/1',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: true,
-  },
-  {
-    title: 'Введение в ReactJS',
-    to: '/courses/1/lessons/2',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Компоненты',
-    to: '/courses/1/lessons/3',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Состояние компонентов и пропсы',
-    to: '/courses/1/lessons/4',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    title: 'Жизненный цикл',
-    to: '/courses/1/lessons/5',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-]);
+export const lessons = writable([]);
 
 export const tutors = writable([
   {
     id: 1,
-    text: 'Sergey Semko',
+    text: "Sergey Semko",
   },
   {
     id: 3,
-    text: 'Jonathan Nelson',
+    text: "Jonathan Nelson",
   },
   {
     id: 4,
-    text: 'Sasha Pokidin',
+    text: "Sasha Pokidin",
   },
   {
     id: 5,
-    text: 'Natasha Rudenko',
+    text: "Natasha Rudenko",
   },
   {
     id: 6,
-    text: 'Yulia Marushko',
+    text: "Yulia Marushko",
   },
 ]);
 
 export function handleAddLesson() {
   const resources = [
     {
-      label: 'lesson',
+      label: "lesson",
       value: 0,
     },
     {
-      label: 'quiz',
+      label: "quiz",
       value: 0,
     },
     {
-      label: 'home task',
+      label: "home task",
       value: 0,
     },
   ];
@@ -171,13 +45,13 @@ export function handleAddLesson() {
     return [
       ..._lessons,
       {
-        title: 'Untitled lesson',
-        to: '/courses/1/lessons/' + (_lessons.length + 1),
+        title: "Untitled lesson",
+        to: "/courses/1/lessons/" + (_lessons.length + 1),
         resources,
         tutor: {
           userId: 1,
-          avatar: 'https://picsum.photos/32/32/?random',
-          name: '',
+          avatar: "https://picsum.photos/32/32/?random",
+          name: "",
         },
         date: new Date(),
       },
diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte
index 36c2f5f6..212531c0 100644
--- a/src/components/Course/components/Navigation/index.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -1,23 +1,24 @@
 <script>
-  import { onMount } from 'svelte';
-  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
-  import hotkeys from 'hotkeys-js';
-  import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
-  import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
-  import { stores, goto } from '@sapper/app';
-  import Expandable from '../../../Expandable/index.svelte';
-  import PageNav from '../../../PageNav/index.svelte';
-  import IconButton from '../../../IconButton/index.svelte';
+  import { onMount } from "svelte";
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
+  import hotkeys from "hotkeys-js";
+  import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
+  import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
+  import { stores, goto } from "@sapper/app";
+  import Expandable from "../../../Expandable/index.svelte";
+  import PageNav from "../../../PageNav/index.svelte";
+  import IconButton from "../../../IconButton/index.svelte";
   import {
     getNavItemRoute,
     getLessonsRoute,
     getLectureNo,
-  } from '../../function';
+  } from "../../function";
 
-  import { lessons } from '../Lesson/store/lessons';
+  import { lessons } from "../Lesson/store/lessons";
 
   // export let lessonId;
   export let courseId;
+  export let path;
 
   let show = true;
 
@@ -31,43 +32,43 @@
 
   const navItems = [
     {
-      label: 'Overview',
+      label: "Overview",
       to: getNavItemRoute(courseId),
       hideSortIcon: true,
     },
     {
-      label: 'Lessons',
+      label: "Lessons",
       to: getLessonsRoute(courseId),
       hideSortIcon: false,
       isLecture: true,
     },
     {
-      label: 'All Exercises',
-      to: getNavItemRoute(courseId, 'allexercises'),
+      label: "All Exercises",
+      to: getNavItemRoute(courseId, "allexercises"),
       hideSortIcon: true,
     },
     {
-      label: 'Scoreboard',
-      to: getNavItemRoute(courseId, 'scoreboard'),
+      label: "Scoreboard",
+      to: getNavItemRoute(courseId, "scoreboard"),
       hideSortIcon: true,
     },
     {
-      label: 'People',
-      to: getNavItemRoute(courseId, 'people'),
+      label: "People",
+      to: getNavItemRoute(courseId, "people"),
       hideSortIcon: true,
     },
     {
-      label: 'Timetable',
-      to: getNavItemRoute(courseId, 'timetable'),
+      label: "Timetable",
+      to: getNavItemRoute(courseId, "timetable"),
       hideSortIcon: true,
     },
   ];
 
   onMount(() => {
-    hotkeys('b', function (event, handler) {
+    hotkeys("b", function (event, handler) {
       event.preventDefault();
       switch (handler.key) {
-        case 'b':
+        case "b":
           show = !show;
           break;
       }
@@ -83,17 +84,18 @@
         <Expandable
           label={navItem.label}
           handleClick={handleMainGroupClick(navItem.to)}
-          isGroupActive={$page.path === navItem.to}
+          isGroupActive={(path || $page.path) === navItem.to}
           hideSortIcon={navItem.hideSortIcon}
         >
           {#if navItem.isLecture}
             {#each $lessons as item, index}
               <a
-                class="item flex items-center {(item.to === $page.path ||
-                  !$page.path.length > 3) &&
+                class="item flex items-center {(item.to ===
+                  (path || $page.path) ||
+                  !(path || $page.path).length > 3) &&
                   'active'} pl-7 py-2 {!item.isComplete &&
                   'cursor-not-allowed'}"
-                href={item.isComplete ? item.to : $page.path}
+                href={item.isComplete ? item.to : path || $page.path}
               >
                 <span class="course-counter"> {getLectureNo(index + 1)} </span>
                 <span>{item.title}</span>
@@ -116,9 +118,9 @@
       value="toggle"
       onClick={() => (show = !show)}
       toolTipProps={{
-        title: 'Toggle sidebar',
-        hotkeys: ['B'],
-        direction: 'right',
+        title: "Toggle sidebar",
+        hotkeys: ["B"],
+        direction: "right",
       }}
     >
       {#if show}
diff --git a/src/components/Course/constants.js b/src/components/Course/constants.js
new file mode 100644
index 00000000..39161e02
--- /dev/null
+++ b/src/components/Course/constants.js
@@ -0,0 +1,4 @@
+export const ROUTES = {
+  COURSES: "courses",
+  LESSONS: "lessons",
+};
diff --git a/src/components/Course/function.js b/src/components/Course/function.js
index d7f6c559..1336e96a 100644
--- a/src/components/Course/function.js
+++ b/src/components/Course/function.js
@@ -1,7 +1,4 @@
-const ROUTES = {
-  COURSES: 'courses',
-  LESSONS: 'lessons',
-};
+import { ROUTES } from "./constants";
 
 export function getNavItemRoute(courseId, routeId) {
   const path = `/${ROUTES.COURSES}/${courseId}`;
diff --git a/src/components/Course/store/course.js b/src/components/Course/store/course.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/CourseContainer/index.svelte b/src/components/CourseContainer/index.svelte
index 5da66182..f74280b3 100644
--- a/src/components/CourseContainer/index.svelte
+++ b/src/components/CourseContainer/index.svelte
@@ -1,15 +1,25 @@
 <script>
+  import { onMount } from "svelte";
+
   import Navigation from "../Course/components/Navigation/index.svelte";
-  export let courseTitle = "";
-  export let courseId = "";
+  import { lessons } from "../Course/components/Lesson/store/lessons";
+
+  export let courseData = {};
+  export let path;
+
+  onMount(() => {
+    if (!$lessons.length) {
+      lessons.set(courseData.lessons);
+    }
+  });
 </script>
 
 <svelte:head>
-  <title>{courseTitle}</title>
+  <title>{courseData.name}</title>
 </svelte:head>
 
 <div class="root">
-  <Navigation {courseId} />
+  <Navigation courseId={courseData.id} {path} />
   <div class="rightBar">
     <slot />
   </div>
diff --git a/src/components/Form/TextField.svelte b/src/components/Form/TextField.svelte
index 062a8399..d21d2bab 100644
--- a/src/components/Form/TextField.svelte
+++ b/src/components/Form/TextField.svelte
@@ -4,7 +4,6 @@
   export let value;
   export let onKeyDown;
   export let className = "";
-  export let autofocus = false;
 </script>
 
 <label class="block {className}">
@@ -15,6 +14,5 @@
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
-    autofocus
   />
 </label>
diff --git a/src/routes/api/_db.js b/src/routes/api/_db.js
index 733c3a6b..12c9b4da 100644
--- a/src/routes/api/_db.js
+++ b/src/routes/api/_db.js
@@ -1,5 +1,5 @@
-import { STATUS } from '../../utils/constants/answers';
-import { QUESTION_TYPE } from '../../components/Question/constants';
+import { STATUS } from "../../utils/constants/answers";
+import { QUESTION_TYPE } from "../../components/Question/constants";
 
 const ROLE = {
   ADMIN: 0,
@@ -10,66 +10,66 @@ const ROLE = {
 const tutors = [
   {
     id: 1,
-    text: 'Sergey Semko',
+    text: "Sergey Semko",
   },
   {
     id: 3,
-    text: 'Jonathan Nelson',
+    text: "Jonathan Nelson",
   },
   {
     id: 4,
-    text: 'Sasha Pokidin',
+    text: "Sasha Pokidin",
   },
   {
     id: 5,
-    text: 'Natasha Rudenko',
+    text: "Natasha Rudenko",
   },
   {
     id: 6,
-    text: 'Yulia Marushko',
+    text: "Yulia Marushko",
   },
 ];
 
 const people = [
   {
-    name: 'Alexander Pokidin',
-    title: 'Senior Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=1',
+    name: "Alexander Pokidin",
+    title: "Senior Software Engineer",
+    avatar: "https://i.pravatar.cc/150?img=1",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    telegramLink: "https://t.me/seed_of_abraham",
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Andrey Filatov',
-    title: 'Fullstack Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=2',
+    name: "Andrey Filatov",
+    title: "Fullstack Software Engineer",
+    avatar: "https://i.pravatar.cc/150?img=2",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    telegramLink: "https://t.me/seed_of_abraham",
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Sergey Semko',
-    title: 'Senior Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=3',
+    name: "Sergey Semko",
+    title: "Senior Software Engineer",
+    avatar: "https://i.pravatar.cc/150?img=3",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    telegramLink: "https://t.me/seed_of_abraham",
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
   {
-    name: 'Natalia Fedii',
-    title: 'Project Manager',
-    avatar: 'https://i.pravatar.cc/150?img=4',
+    name: "Natalia Fedii",
+    title: "Project Manager",
+    avatar: "https://i.pravatar.cc/150?img=4",
     role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
+    telegramLink: "https://t.me/seed_of_abraham",
+    mailLink: "mailto:irb.ossystem@gmail.com",
   },
 ];
 
 const courses = [
   {
     id: 1,
-    title: 'React.js Fundamentals',
-    status: '',
+    title: "React.js Fundamentals",
+    status: "",
   },
 ];
 
@@ -87,24 +87,24 @@ const lessons = [
   {
     id: 1,
     course_id: 1,
-    title: 'Вступительное слово. Софт скилы',
-    to: '/courses/1/lessons/1',
+    title: "Вступительное слово. Софт скилы",
+    to: "/courses/1/lessons/1",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -114,24 +114,24 @@ const lessons = [
   {
     id: 2,
     course_id: 1,
-    title: 'Введение в ReactJS',
-    to: '/courses/1/lessons/2',
+    title: "Введение в ReactJS",
+    to: "/courses/1/lessons/2",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -141,24 +141,24 @@ const lessons = [
   {
     id: 3,
     course_id: 1,
-    title: 'Компоненты',
-    to: '/courses/1/lessons/3',
+    title: "Компоненты",
+    to: "/courses/1/lessons/3",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -168,24 +168,24 @@ const lessons = [
   {
     id: 4,
     course_id: 1,
-    title: 'Состояние компонентов и пропсы',
-    to: '/courses/1/lessons/4',
+    title: "Состояние компонентов и пропсы",
+    to: "/courses/1/lessons/4",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -195,24 +195,24 @@ const lessons = [
   {
     id: 5,
     course_id: 1,
-    title: 'Жизненный цикл',
-    to: '/courses/1/lessons/5',
+    title: "Жизненный цикл",
+    to: "/courses/1/lessons/5",
     tutor: {
       userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
     },
     resources: [
       {
-        label: 'lesson',
+        label: "lesson",
         value: 1,
       },
       {
-        label: 'quiz',
+        label: "quiz",
         value: 1,
       },
       {
-        label: 'home task',
+        label: "home task",
         value: 2,
       },
     ],
@@ -226,38 +226,38 @@ const exercises = [
   {
     id: 1,
     lesson_id: 1,
-    title: 'Home task 1',
+    title: "Home task 1",
     description:
       "You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
     questions: [
       {
-        id: 'react-founder',
+        id: "react-founder",
         type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of React.js',
+        title: "Who is the creator of React.js",
         options: [
           {
-            id: '1',
-            value: 'Dan Abrahmov',
+            id: "1",
+            value: "Dan Abrahmov",
           },
           {
-            id: '2',
-            value: 'Google',
+            id: "2",
+            value: "Google",
           },
           {
-            id: '3',
-            value: 'Facebook',
+            id: "3",
+            value: "Facebook",
           },
           {
-            id: '4',
-            value: 'Traversy Media',
+            id: "4",
+            value: "Traversy Media",
           },
         ],
-        answers: ['3'],
+        answers: ["3"],
       },
       {
-        id: 'vue-founder',
+        id: "vue-founder",
         type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of Vue.js',
+        title: "Who is the creator of Vue.js",
         code: `const name = 'Josh Perez';\nconst element = <h1>Hello, {name}</h1>;\n\nReactDOM.render(\n 
       element,\,
       document.getElementById('root')
@@ -265,53 +265,53 @@ const exercises = [
         `,
         options: [
           {
-            id: '1',
-            value: 'Evan Vue',
+            id: "1",
+            value: "Evan Vue",
           },
           {
-            id: '2',
-            value: 'Mark Zukerberg',
+            id: "2",
+            value: "Mark Zukerberg",
           },
           {
-            id: '3',
-            value: 'Prince Charles',
+            id: "3",
+            value: "Prince Charles",
           },
           {
-            id: '4',
-            value: 'Bill Gates',
+            id: "4",
+            value: "Bill Gates",
           },
         ],
-        answers: ['3'],
+        answers: ["3"],
       },
       {
-        id: 'svelte-founder',
+        id: "svelte-founder",
         type: QUESTION_TYPE.RADIO,
-        title: 'Who is the creator of Svelte.js',
+        title: "Who is the creator of Svelte.js",
         options: [
           {
-            id: '1',
-            value: 'Hillary Svelte',
+            id: "1",
+            value: "Hillary Svelte",
           },
           {
-            id: '2',
-            value: 'Mircosoft',
+            id: "2",
+            value: "Mircosoft",
           },
           {
-            id: '3',
-            value: 'Elevate',
+            id: "3",
+            value: "Elevate",
           },
           {
-            id: '4',
-            value: 'Coding Train',
+            id: "4",
+            value: "Coding Train",
           },
         ],
-        answers: ['2'],
+        answers: ["2"],
       },
       {
-        id: 'angular-founder',
+        id: "angular-founder",
         type: QUESTION_TYPE.TEXTAREA,
-        title: 'Who is the creator of Angular.js',
-        value: '',
+        title: "Who is the creator of Angular.js",
+        value: "",
       },
     ],
   },
@@ -336,9 +336,11 @@ lessons.forEach((lesson) => {
 });
 
 export function getCourse(id) {
-  const people = [];
   return {
+    id,
+    name: "React.js",
     people,
+    roles: ROLE,
     lessons: getLessons(id),
   };
 }
diff --git a/src/routes/api/course.js b/src/routes/api/course.js
index 3a88e52f..68078d52 100644
--- a/src/routes/api/course.js
+++ b/src/routes/api/course.js
@@ -1,8 +1,8 @@
-import { getCourse } from './_db';
+import { getCourse } from "./_db";
 
 function writeJsonHead(res, statusCode) {
   res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
+    "Content-Type": "application/json",
   });
 }
 
@@ -11,5 +11,5 @@ export function get(req, res, next) {
 
   writeJsonHead(res, 200);
 
-  return res.end(JSON.stringify(getCourse(id)));
+  return res.end(JSON.stringify(getCourse(parseInt(id, 2))));
 }
diff --git a/src/routes/courses/[id]/allexercises.svelte b/src/routes/courses/[id]/allexercises.svelte
index 175bf801..7bc6f3c7 100644
--- a/src/routes/courses/[id]/allexercises.svelte
+++ b/src/routes/courses/[id]/allexercises.svelte
@@ -1,18 +1,24 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
 
-    return { courseId, courseNavItem, lessonId };
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import PageNav from '../../../components/PageNav/index.svelte';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="All Exercises" />
 </CourseContainer>
diff --git a/src/routes/courses/[id]/index.svelte b/src/routes/courses/[id]/index.svelte
index be8d0467..f8ac13f7 100644
--- a/src/routes/courses/[id]/index.svelte
+++ b/src/routes/courses/[id]/index.svelte
@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
-    console.log(`course id`, params);
-    return { courseId, courseNavItem, lessonId };
+    let [courseId] = params.id;
+
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import Overview from '../../../components/Course/index.svelte';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import Overview from "../../../components/Course/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <Overview />
 </CourseContainer>
diff --git a/src/routes/courses/[id]/lessons/[...id]/index.svelte b/src/routes/courses/[id]/lessons/[...id]/index.svelte
deleted file mode 100644
index e36c1108..00000000
--- a/src/routes/courses/[id]/lessons/[...id]/index.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [lessonId, exerciseRouteName, exerciseId] = params.id;
-    return { lessonId, exerciseRouteName, exerciseId };
-  }
-</script>
-
-<script>
-  import { stores } from '@sapper/app';
-  import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
-
-  import PageNav from '../../../../../components/PageNav/index.svelte';
-  import PageBody from '../../../../../components/PageBody/index.svelte';
-  import Readme from '../../../../../components/Course/components/Lesson/Readme/index.svelte';
-  import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
-
-  export let lessonId;
-  export let exerciseRouteName;
-  export let exerciseId;
-
-  let path;
-
-  const { page } = stores();
-
-  function getCourseId() {
-    return $page.path.match(/\w+\/(\d)\//)[1];
-  }
-
-  $: path = $page.path.replace(/\/exercises[\/ 0-9]*/, '');
-</script>
-
-<CourseContainer title="ReactJS" courseId={getCourseId()}>
-  <PageNav
-    navItems={[
-      {
-        label: 'README.md',
-        isActive: !exerciseRouteName,
-        href: path,
-      },
-      {
-        label: 'Exercises',
-        isActive: !!exerciseRouteName,
-        href: `${path}/exercises`,
-      },
-    ]}
-  />
-
-  <PageBody>
-    {#if !!exerciseRouteName}
-      <Exercises {exerciseId} path={`${path}/exercises`} />
-    {:else}
-      <Readme {lessonId} />
-    {/if}
-  </PageBody>
-</CourseContainer>
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte
new file mode 100644
index 00000000..a91c487b
--- /dev/null
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte
@@ -0,0 +1,61 @@
+<script context="module">
+  export async function preload({ params }) {
+    const { id: courseId, lessonParams = [] } = params;
+    const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
+
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseData: data, lessonId, exerciseRouteName, exerciseId };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
+
+  import PageNav from "../../../../../components/PageNav/index.svelte";
+  import PageBody from "../../../../../components/PageBody/index.svelte";
+  import Readme from "../../../../../components/Course/components/Lesson/Readme/index.svelte";
+  import Exercises from "../../../../../components/Course/components/Lesson/Exercises/index.svelte";
+
+  export let courseData;
+  export let lessonId;
+  export let exerciseRouteName;
+  export let exerciseId;
+
+  let path;
+
+  const { page } = stores();
+
+  $: path = $page.path.replace(/\/exercises[\/ 0-9]*/, "");
+</script>
+
+<CourseContainer {courseData} {path}>
+  <PageNav
+    navItems={[
+      {
+        label: "README.md",
+        isActive: !exerciseRouteName,
+        href: path,
+      },
+      {
+        label: "Exercises",
+        isActive: !!exerciseRouteName,
+        href: `${path}/exercises`,
+      },
+    ]}
+  />
+
+  <PageBody>
+    {#if !!exerciseRouteName}
+      <Exercises {exerciseId} path={`${path}/exercises`} />
+    {:else}
+      <Readme {lessonId} />
+    {/if}
+  </PageBody>
+</CourseContainer>
diff --git a/src/routes/courses/[id]/lessons/index.svelte b/src/routes/courses/[id]/lessons/index.svelte
index 9d7bb383..99a8a7e3 100644
--- a/src/routes/courses/[id]/lessons/index.svelte
+++ b/src/routes/courses/[id]/lessons/index.svelte
@@ -1,29 +1,37 @@
 <script context="module">
   export async function preload({ params }) {
+    console.log("params", params);
     let [courseId, courseNavItem, lessonId] = params.id;
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import Time24 from 'carbon-icons-svelte/lib/Time24';
-  import Edit24 from 'carbon-icons-svelte/lib/Edit24';
-  import Save24 from 'carbon-icons-svelte/lib/Save24';
-  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
-  import PageNav from '../../../../components/PageNav/index.svelte';
-  import PageBody from '../../../../components/PageBody/index.svelte';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import TextField from '../../../../components/Form/TextField.svelte';
-  import IconButton from '../../../../components/IconButton/index.svelte';
-  import Select from '../../../../components/Form/Select.svelte';
-  import CourseContainer from '../../../../components/CourseContainer/index.svelte';
+  import Time24 from "carbon-icons-svelte/lib/Time24";
+  import Edit24 from "carbon-icons-svelte/lib/Edit24";
+  import Save24 from "carbon-icons-svelte/lib/Save24";
+  import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
+  import PageNav from "../../../../components/PageNav/index.svelte";
+  import PageBody from "../../../../components/PageBody/index.svelte";
+  import PrimaryButton from "../../../../components/PrimaryButton/index.svelte";
+  import TextField from "../../../../components/Form/TextField.svelte";
+  import IconButton from "../../../../components/IconButton/index.svelte";
+  import Select from "../../../../components/Form/Select.svelte";
+  import CourseContainer from "../../../../components/CourseContainer/index.svelte";
   import {
     lessons,
     tutors,
     handleAddLesson,
-  } from '../../../../components/Course/components/Lesson/store/lessons';
+  } from "../../../../components/Course/components/Lesson/store/lessons";
 
-  export let courseId;
+  export let courseData;
 
   let lessonEditing;
   let ref;
@@ -31,9 +39,9 @@
   function formatDate(date) {
     const d = new Date(date);
 
-    const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
-    const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
-    const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
+    const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
+    const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
+    const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
 
     return `${ye}-${mo}-${da}`;
   }
@@ -43,13 +51,13 @@
     setTimeout(() => {
       lessonEditing = $lessons.length - 1;
       if (ref) {
-        ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
+        ref.scrollIntoView({ block: "end", behavior: "smooth" });
       }
     }, 100);
   }
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Lessons">
     <div slot="widget">
       <PrimaryButton label="Add" onClick={addLesson} />
@@ -68,8 +76,8 @@
             <IconButton
               onClick={() => (lesson.isComplete = !lesson.isComplete)}
               toolTipProps={{
-                title: `Click to ${lesson.isComplete ? 'lock' : 'unlock'}`,
-                direction: 'right',
+                title: `Click to ${lesson.isComplete ? "lock" : "unlock"}`,
+                direction: "right",
               }}
             >
               {#if lesson.isComplete}
@@ -110,7 +118,7 @@
               <div class="flex items-center mr-2">
                 {lesson.resources
                   .map((r) => `${r.value} ${r.label}`)
-                  .join(', ')}
+                  .join(", ")}
               </div>
             </div>
 
diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte
index 94cc76a5..f7a77efa 100644
--- a/src/routes/courses/[id]/people.svelte
+++ b/src/routes/courses/[id]/people.svelte
@@ -1,58 +1,33 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import { stores } from '@sapper/app';
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
-  import UserCard from '../../../components/UserCard/index.svelte';
+  import { stores } from "@sapper/app";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
+  import UserCard from "../../../components/UserCard/index.svelte";
+
+  export let courseData = {};
 
   const { page } = stores();
 
-  const teachers = [
-    {
-      name: 'Alexander Pokidin',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=1',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Andrey Filatov',
-      title: 'Fullstack Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=2',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Sergey Semko',
-      title: 'Senior Software Engineer',
-      avatar: 'https://i.pravatar.cc/150?img=3',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-    {
-      name: 'Natalia Fedii',
-      title: 'Project Manager',
-      avatar: 'https://i.pravatar.cc/150?img=4',
-
-      telegramLink: 'https://t.me/seed_of_abraham',
-      mailLink: 'mailto:irb.ossystem@gmail.com',
-    },
-  ];
+  const teachers = courseData.people;
   const students = [...teachers, ...teachers, ...teachers];
-  export let courseId;
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="People" disableSticky={true} />
   <div class="m-3">
     <h3>
diff --git a/src/routes/courses/[id]/scoreboard.svelte b/src/routes/courses/[id]/scoreboard.svelte
index d1f09e29..dcb71e2d 100644
--- a/src/routes/courses/[id]/scoreboard.svelte
+++ b/src/routes/courses/[id]/scoreboard.svelte
@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Scoreboard" />
 </CourseContainer>
diff --git a/src/routes/courses/[id]/timetable.svelte b/src/routes/courses/[id]/timetable.svelte
index 5bc5d04c..b35e3858 100644
--- a/src/routes/courses/[id]/timetable.svelte
+++ b/src/routes/courses/[id]/timetable.svelte
@@ -1,18 +1,25 @@
 <script context="module">
   export async function preload({ params }) {
-    let [courseId, courseNavItem, lessonId] = params.id;
+    let [courseId] = params.id;
 
-    return { courseId, courseNavItem, lessonId };
+    const res = await this.fetch(`api/course?id=${courseId}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { courseId, courseData: data };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
-  import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import PageNav from '../../../components/PageNav/index.svelte';
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import PageNav from "../../../components/PageNav/index.svelte";
 
-  export let courseId;
+  export let courseData = {};
 </script>
 
-<CourseContainer title="ReactJS" {courseId}>
+<CourseContainer {courseData}>
   <PageNav title="Timetable" />
 </CourseContainer>