diff --git a/api/v1/serializers/mixins.py b/api/v1/serializers/mixins.py
index 40584503..50e7d19d 100644
--- a/api/v1/serializers/mixins.py
+++ b/api/v1/serializers/mixins.py
@@ -32,35 +32,23 @@ class DispatchContentMixin(object):
                 if 'id' in cdata and cdata['id']:
                     t = Text.objects.get(id=cdata.pop('id'))
                     serializer = TextCreateSerializer(t, data=cdata)
-                    if serializer.is_valid():
-                        serializer.save()
                 else:
                     serializer = TextCreateSerializer(data=cdata)
-                    if serializer.is_valid():
-                        serializer.save()
+                if serializer.is_valid():
+                    serializer.save()
             elif ctype == 'image':
                 if 'id' in cdata and cdata['id']:
                     image = Image.objects.get(id=cdata.pop('id'))
                     serializer = ImageCreateSerializer(image, data=cdata)
-                    if serializer.is_valid():
-                        image = serializer.save()
-                    else:
-                        continue
-                    try:
-                        image_object = ImageObject.objects.get(id=cdata['img'])
-                    except ImageObject.DoesNotExist:
-                        pass
-                    else:
-                        image.img = image_object
-                        image.save()
                 else:
                     serializer = ImageCreateSerializer(data=cdata)
-                    if serializer.is_valid():
-                        image = serializer.save()
-                    else:
-                        continue
+                if serializer.is_valid():
+                    image = serializer.save()
+                else:
+                    continue
+                if 'img' in cdata:
                     try:
-                        image_object = ImageObject.objects.get(id=cdata['img'])
+                        image_object = ImageObject.objects.get(id=cdata.get('img'))
                     except ImageObject.DoesNotExist:
                         pass
                     else:
@@ -71,25 +59,15 @@ class DispatchContentMixin(object):
                 if 'id' in cdata and cdata['id']:
                     it = ImageText.objects.get(id=cdata.pop('id'))
                     serializer = ImageTextCreateSerializer(it, data=cdata)
-                    if serializer.is_valid():
-                        it = serializer.save()
-                    else:
-                        continue
-                    try:
-                        image_object = ImageObject.objects.get(id=cdata['img'])
-                    except ImageObject.DoesNotExist:
-                        pass
-                    else:
-                        it.img = image_object
-                        it.save()
                 else:
                     serializer = ImageTextCreateSerializer(data=cdata)
-                    if serializer.is_valid():
-                        it = serializer.save()
-                    else:
-                        continue
+                if serializer.is_valid():
+                    it = serializer.save()
+                else:
+                    continue
+                if 'img' in cdata:
                     try:
-                        image_object = ImageObject.objects.get(id=cdata['img'])
+                        image_object = ImageObject.objects.get(id=cdata.get('img'))
                     except ImageObject.DoesNotExist:
                         pass
                     else:
@@ -100,52 +78,36 @@ class DispatchContentMixin(object):
                 if 'id' in cdata and cdata['id']:
                     v = Video.objects.get(id=cdata.pop('id'))
                     serializer = VideoCreateSerializer(v, data=cdata)
-                    if serializer.is_valid():
-                        serializer.save()
                 else:
                     serializer = VideoCreateSerializer(data=cdata)
-                    if serializer.is_valid():
-                        serializer.save()
+                if serializer.is_valid():
+                    serializer.save()
             elif ctype == 'images':
                 if 'id' in cdata and cdata['id']:
                     g = Gallery.objects.get(id=cdata['id'])
                     g.position = cdata['position']
                     g.title = cdata['title']
                     g.uuid = cdata['uuid']
-                    setattr(g, obj_type, obj)
-                    g.save()
-                    if 'images' in cdata:
-                        for image in cdata['images']:
-                            if 'img' in image and image['img']:
-                                if 'id' in image and image['id']:
-                                    gi = GalleryImage.objects.get(id=image['id'])
-                                    gi.img = ImageObject.objects.get(id=image['img'])
-                                    gi.save()
-                                else:
-                                    gi = GalleryImage.objects.create(
-                                        gallery=g,
-                                        img=ImageObject.objects.get(id=image['img'])
-                                    )
                 else:
                     g = Gallery(
                         position=cdata['position'],
                         title=cdata['title'],
                         uuid=cdata['uuid'],
                     )
-                    setattr(g, obj_type, obj)
-                    g.save()
-                    if 'images' in cdata:
-                        for image in cdata['images']:
-                            if 'img' in image and image['img']:
-                                if 'id' in image and image['id']:
-                                    gi = GalleryImage.objects.get(id=image['id'])
-                                    gi.img = ImageObject.objects.get(id=image['img'])
-                                    gi.save()
-                                else:
-                                    gi = GalleryImage.objects.create(
-                                        gallery=g,
-                                        img=ImageObject.objects.get(id=image['img'])
-                                    )
+                setattr(g, obj_type, obj)
+                g.save()
+                if 'images' in cdata:
+                    for image in cdata['images']:
+                        if 'img' in image and image['img']:
+                            if 'id' in image and image['id']:
+                                gi = GalleryImage.objects.get(id=image['id'])
+                                gi.img = ImageObject.objects.get(id=image['img'])
+                                gi.save()
+                            else:
+                                gi = GalleryImage.objects.create(
+                                    gallery=g,
+                                    img=ImageObject.objects.get(id=image['img'])
+                                )
 
 
 class DispatchMaterialMixin(object):
diff --git a/project/templates/blocks/lil_store_js.html b/project/templates/blocks/lil_store_js.html
index 968ded1a..21d19bea 100644
--- a/project/templates/blocks/lil_store_js.html
+++ b/project/templates/blocks/lil_store_js.html
@@ -10,6 +10,7 @@
     user: {
       id: '{{ request.user.id|default:'' }}',
       photo: '{% if request.user.photo %}{{ request.user.photo.url }}{% else %}{% static 'img/user_default.jpg' %}{% endif %}',
-    }
+    },
+    components: {}
   };
 </script>
diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html
index 18be67aa..70691489 100644
--- a/project/templates/lilcity/edit_index.html
+++ b/project/templates/lilcity/edit_index.html
@@ -316,12 +316,12 @@
   </div>
 </div>
 {% include 'templates/blocks/lil_store_js.html' %}
-<script type="text/javascript" src={% static "app.js" %}></script>
 <script>
   var schoolDiscount = parseFloat({{ config.SERVICE_DISCOUNT }});
   var schoolAmountForDiscount = parseFloat({{ config.SERVICE_DISCOUNT_MIN_AMOUNT }});
 </script>
 {% block foot %}{% endblock foot %}
+<script type="text/javascript" src={% static "app.js" %}></script>
 </body>
 
 </html>
diff --git a/project/urls.py b/project/urls.py
index 60a492c4..126205ad 100644
--- a/project/urls.py
+++ b/project/urls.py
@@ -47,14 +47,14 @@ urlpatterns = [
     path('author-request/success/', TemplateView.as_view(template_name='user/become-author-success.html'), name='author-request-success'),
     path('courses/', CoursesView.as_view(), name='courses'),
     path('course/create', CourseEditView.as_view(), name='course_create'),
-    path('course/create/lessons', CourseEditView.as_view(), name='course_create_lessons'),
-    path('course/create/lessons/new', CourseEditView.as_view(), name='course_create_lessons_new'),
-    path('course/create/lessons/edit/<int:lesson>', CourseEditView.as_view(), name='course_create_lessons_edit'),
+    path('course/<int:pk>/lessons/new', CourseEditView.as_view(), name='course_lessons_new'),
+    path('course/<int:pk>/lessons/<int:lesson>/edit', CourseEditView.as_view(), name='course_lessons_edit'),
     path('course/on-moderation', CourseOnModerationView.as_view(), name='course-on-moderation'),
     path('course/<int:pk>/', CourseView.as_view(), name='course'),
     path('course/<str:slug>/', CourseView.as_view(), name='course'),
     path('course/<int:pk>/checkout', CourseBuyView.as_view(), name='course-checkout'),
     path('course/<int:pk>/edit', CourseEditView.as_view(), name='course_edit'),
+    path('course/<int:pk>/edit/lessons', CourseEditView.as_view(), name='course_edit_lessons'),
     path('course/<int:pk>/lessons', CourseView.as_view(template_name='course/course_only_lessons.html', only_lessons=True), name='course-only-lessons'),
     path('course/<int:course_id>/like', likes, name='likes'),
     path('course/<int:course_id>/comment', coursecomment, name='coursecomment'),
diff --git a/web/src/components/ContestRedactor.vue b/web/src/components/ContestRedactor.vue
index 41820a66..a0cffc9d 100644
--- a/web/src/components/ContestRedactor.vue
+++ b/web/src/components/ContestRedactor.vue
@@ -66,45 +66,7 @@
       <div class="section__center center">
         <div class="kit">
           <div class="kit__body">
-            <vue-draggable v-model="contest.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
-              <div v-for="(block, index) in contest.content" :key="block.data.id ? block.data.id : block.data.guid">
-                <block-text v-if="block.type === 'text'"
-                            :index="index"
-                            :title.sync="block.data.title"
-                            :text.sync="block.data.text"
-                            v-on:remove="onBlockRemoved"
-                            :access-token="accessToken"/>
-                <block-image-text v-if="block.type === 'image-text'"
-                                  :index="index"
-                                  :title.sync="block.data.title"
-                                  :text.sync="block.data.text"
-                                  :image-id.sync="block.data.image_id"
-                                  :image-url.sync="block.data.image_url"
-                                  v-on:remove="onBlockRemoved"
-                                  :access-token="accessToken"/>
-                <block-image v-if="block.type === 'image'"
-                             :index="index"
-                             :title.sync="block.data.title"
-                             :image-id.sync="block.data.image_id"
-                             :image-url.sync="block.data.image_url"
-                             v-on:remove="onBlockRemoved"
-                             :access-token="accessToken"/>
-                <block-images v-if="block.type === 'images'"
-                              :index="index"
-                              :title.sync="block.data.title"
-                              :text.sync="block.data.text"
-                              :images.sync="block.data.images"
-                              v-on:remove="onBlockRemoved"
-                              :access-token="accessToken"/>
-                <block-video v-if="block.type === 'video'"
-                             :index="index"
-                             :title.sync="block.data.title"
-                             v-on:remove="onBlockRemoved"
-                             :video-url.sync="block.data.video_url"/>
-              </div>
-            </vue-draggable>
-
-            <block-add v-on:added="onBlockAdded"/>
+            <block-content :content.sync="contest.content"></block-content>
           </div>
         </div>
       </div>
@@ -113,15 +75,9 @@
 </template>
 
 <script>
-    import BlockText from './blocks/BlockText'
-    import BlockImage from './blocks/BlockImage'
-    import BlockImages from './blocks/BlockImages'
-    import BlockImageText from './blocks/BlockImageText'
-    import BlockVideo from './blocks/BlockVideo'
-    import BlockAdd from "./blocks/BlockAdd";
     import {api} from "../js/modules/api";
     import DatePicker from 'vuejs-datepicker';
-    import Draggable from 'vuedraggable';
+    import BlockContent from './blocks/BlockContent'
     import slugify from 'slugify';
     import {required, minValue, numeric, url } from 'vuelidate/lib/validators'
     import _ from 'lodash';
@@ -175,18 +131,6 @@
         }
       },
       methods: {
-        onBlockRemoved(blockIndex) {
-          const blockToRemove = this.contest.content[blockIndex];
-          // Удаляем блок из Vue
-          this.contest.content.splice(blockIndex, 1);
-          // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
-          if (blockToRemove.data.id) {
-            api.removeContentBlock(blockToRemove, this.accessToken);
-          }
-        },
-        onBlockAdded(blockData) {
-          this.contest.content.push(blockData);
-        },
         onTitleInput() {
            this.$v.contest.title.$touch();
           if (!this.slugChanged) {
@@ -219,7 +163,7 @@
             id: data.id,
             title: data.title,
             description: data.description,
-            content: api.convertContentResponse(data.content),
+            content: api.convertContentJson(data.content),
             date_start: data.date_start,
             date_end: data.date_end,
             slug: data.slug,
@@ -252,70 +196,7 @@
           data.date_start = data.date_start ? moment(data.date_start).format('MM-DD-YYYY') : null;
           data.date_end = data.date_end ? moment(data.date_end).format('MM-DD-YYYY') : null;
           data.cover = this.contest.coverImageId || '';
-          data.content = this.contest.content.map((block, index) => {
-            if (block.type === 'text') {
-              return {
-                'type': 'text',
-                'data': {
-                  'id': block.data.id ? block.data.id : null,
-                  'uuid': block.uuid,
-                  'position': ++index,
-                  'title': block.data.title,
-                  'txt': block.data.text,
-                }
-              }
-            } else if (block.type === 'image') {
-              return {
-                'type': 'image',
-                'data': {
-                  'id': block.data.id ? block.data.id : null,
-                  'uuid': block.uuid,
-                  'position': ++index,
-                  'title': block.data.title,
-                  'img': block.data.image_id,
-                }
-              }
-            } else if (block.type === 'image-text') {
-              return {
-                'type': 'image-text',
-                'data': {
-                  'id': block.data.id ? block.data.id : null,
-                  'uuid': block.uuid,
-                  'position': ++index,
-                  'title': block.data.title,
-                  'img': block.data.image_id,
-                  'txt': block.data.text,
-                }
-              }
-            } else if (block.type === 'images') {
-              return {
-                'type': 'images',
-                'data': {
-                  'id': block.data.id ? block.data.id : null,
-                  'uuid': block.uuid,
-                  'position': ++index,
-                  'title': block.data.title,
-                  'images': block.data.images.map((galleryImage) => {
-                    return {
-                      'id': galleryImage.id ? galleryImage.id : null,
-                      'img': galleryImage.img,
-                    }
-                  }),
-                }
-              }
-            } else if (block.type === 'video') {
-              return {
-                'type': 'video',
-                'data': {
-                  'id': block.data.id ? block.data.id : null,
-                  'uuid': block.uuid,
-                  'position': ++index,
-                  'title': block.data.title,
-                  'url': block.data.video_url,
-                }
-              }
-            }
-          });
+          data.content = api.convertContentJson(this.contest.content, true);
 
           const request = this.contest.id
             ? api.put(`/api/v1/contests/${this.contest.id}/`, data, {
@@ -343,15 +224,8 @@
         }
       },
       components: {
-        BlockAdd,
+        BlockContent,
         'vue-datepicker': DatePicker,
-        'block-text': BlockText,
-        'block-image': BlockImage,
-        'block-image-text': BlockImageText,
-        'block-images': BlockImages,
-        'block-video': BlockVideo,
-        'vue-draggable': Draggable,
-
       }
     };
 </script>
diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue
index b3703785..4c46f4b2 100644
--- a/web/src/components/CourseRedactor.vue
+++ b/web/src/components/CourseRedactor.vue
@@ -166,45 +166,7 @@
                 </button>
               </div>
               <div v-if="viewSection === 'course'" class="kit__body">
-                <vue-draggable v-model="course.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
-                  <div v-for="(block, index) in course.content" :key="block.data.id ? block.data.id : block.data.guid">
-                    <block-text v-if="block.type === 'text'"
-                                :index="index"
-                                :title.sync="block.data.title"
-                                :text.sync="block.data.text"
-                                v-on:remove="onBlockRemoved"
-                                :access-token="accessToken"/>
-                    <block-image-text v-if="block.type === 'image-text'"
-                                      :index="index"
-                                      :title.sync="block.data.title"
-                                      :text.sync="block.data.text"
-                                      :image-id.sync="block.data.image_id"
-                                      :image-url.sync="block.data.image_url"
-                                      v-on:remove="onBlockRemoved"
-                                      :access-token="accessToken"/>
-                    <block-image v-if="block.type === 'image'"
-                                 :index="index"
-                                 :title.sync="block.data.title"
-                                 :image-id.sync="block.data.image_id"
-                                 :image-url.sync="block.data.image_url"
-                                 v-on:remove="onBlockRemoved"
-                                 :access-token="accessToken"/>
-                    <block-images v-if="block.type === 'images'"
-                                  :index="index"
-                                  :title.sync="block.data.title"
-                                  :text.sync="block.data.text"
-                                  :images.sync="block.data.images"
-                                  v-on:remove="onBlockRemoved"
-                                  :access-token="accessToken"/>
-                    <block-video v-if="block.type === 'video'"
-                                 :index="index"
-                                 :title.sync="block.data.title"
-                                 v-on:remove="onBlockRemoved"
-                                 :video-url.sync="block.data.video_url"/>
-                  </div>
-                </vue-draggable>
-
-                <block-add v-on:added="onBlockAdded"/>
+                <block-content :content.sync="course.content"></block-content>
 
                 <!--<div class="kit__foot">
                   <button type="submit" class="kit__submit btn btn_md" v-bind:class="{ loading: courseSaving }">
@@ -236,7 +198,7 @@
                         </div>
                         <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
                         <div class="lessons__row">
-                          <div class="lessons__content">{{ lesson.short_description | linebreaks }}</div>
+                          <div class="lessons__content">{{ lesson.short_description }}</div>
                         </div>
                       </div>
                   </vue-draggable>
@@ -269,15 +231,10 @@
     import { ROLE_ADMIN, ROLE_AUTHOR } from './consts'
     import LinkInput from './inputs/LinkInput'
     import DatePicker from 'vuejs-datepicker'
-    import BlockText from './blocks/BlockText'
-    import BlockImage from './blocks/BlockImage'
-    import BlockImages from './blocks/BlockImages'
-    import BlockImageText from './blocks/BlockImageText'
-    import BlockVideo from './blocks/BlockVideo'
+    import BlockContent from './blocks/BlockContent'
     import LilSelect from "./inputs/LilSelect";
     import LessonRedactor from "./LessonRedactor";
     import {api} from "../js/modules/api";
-    import BlockAdd from "./blocks/BlockAdd";
     import $ from 'jquery';
     import {required, minValue, numeric, url } from 'vuelidate/lib/validators'
     import slugify from 'slugify';
@@ -493,18 +450,6 @@
                     });
                 }
             },
-            onBlockRemoved(blockIndex) {
-                const blockToRemove = this.course.content[blockIndex];
-                // Удаляем блок из Vue
-                this.course.content.splice(blockIndex, 1);
-                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
-                if (blockToRemove.data.id) {
-                    api.removeContentBlock(blockToRemove, this.accessToken);
-                }
-            },
-            onBlockAdded(blockData) {
-                this.course.content.push(blockData);
-            },
             removeLesson(lessonIndex) {
                 if (!confirm('Вы действительно хотите удалить этот урок?')) {
                     return;
@@ -518,18 +463,18 @@
             },
             editLesson(lessonIndex) {
                 this.currentLesson = this.lessons[lessonIndex];
-                history.push("/course/create/lessons/edit/"+this.currentLesson.id);
+                history.push(`/course/${this.course.id}/lessons/${this.currentLesson.id}/edit`);
                 this.viewSection = 'lessons-edit';
             },
             showCourse() {
                 if (this.viewSection !== 'course') {
-                  history.push("/course/create");
+                  history.push(this.course.id ? `/course/${this.course.id}/edit` : "/course/create");
                 }
                 this.viewSection = 'course'
             },
             showLessons() {
                 if (this.viewSection !== 'lessons') {
-                  history.push("/course/create/lessons");
+                  history.push(`/course/${this.course.id}/edit/lessons`);
                 }
                 this.viewSection = 'lessons';
             },
@@ -540,7 +485,7 @@
                     content: [],
                 };
                 if (this.viewSection !== 'lessons-edit') {
-                    history.push("/course/create/lessons/new");
+                    history.push(`/course/${this.course.id}/lessons/new`);
                 }
                 this.viewSection = 'lessons-edit';
                 window.scrollTo(0, 0);
@@ -613,7 +558,7 @@
                 return req;
             },
             goToLessons() {
-                history.push("/course/create/lessons");
+                history.push(`/course/${this.course.id}/edit/lessons`);
                 this.viewSection = 'lessons';
                 this.$nextTick(() => {
                     const elementTop = $('#course-redactor__nav').position().top - 130;
@@ -868,18 +813,17 @@
             },
             updateViewSection(location, action) {
                 //console.log('updateViewSection[action]', action);
-                if (location.pathname === '/course/create/lessons') {
+                if (location.pathname.match(/course\/\d+\/edit\/lessons/)) {
                     this.viewSection = 'lessons';
-                } else if (location.pathname === '/course/create') {
-                    this.viewSection = 'course';
-                } else if (location.pathname === '/course/create/lessons/new') {
+                } else if (location.pathname.match(/course\/\d+\/lessons\/new/)){
                     this.viewSection = 'lessons-edit';
-                } else if (location.pathname.indexOf('/course/create/lessons/edit') !== -1) {
-                    let lessonId = parseInt(location.pathname.split('/').pop());
-                    //console.log('lessonId', lessonId, this.lessons.toString());
-                    //console.log('lessod edit', this.lessons.find((i)=>{return i.id === lessonId}));
+                } else if (location.pathname.match(/course\/\d+\/lessons\/\d+\/edit/)) {
+                    // let lessonId = parseInt(location.pathname.split('/').pop());
+                    const lessonId = +location.pathname.match(/lessons\/(\d+)\/edit/)[1];
                     this.currentLesson = this.lessons.find((i)=>{return i.id === lessonId});
                     this.viewSection = 'lessons-edit';
+                } else {
+                    this.viewSection = 'course';
                 }
             },
             onLessonsChanged() {
@@ -1127,17 +1071,11 @@
 
         },
         components: {
-            BlockAdd,
             LessonRedactor,
             LilSelect,
-            BlockText,
+            BlockContent,
             'link-input': LinkInput,
             'vue-datepicker': DatePicker,
-            'block-text': BlockText,
-            'block-image': BlockImage,
-            'block-image-text': BlockImageText,
-            'block-images': BlockImages,
-            'block-video': BlockVideo,
             'lesson-redactor': LessonRedactor,
             'vue-draggable': Draggable,
         }
diff --git a/web/src/components/LessonRedactor.vue b/web/src/components/LessonRedactor.vue
index a0a245e2..1fe1724b 100644
--- a/web/src/components/LessonRedactor.vue
+++ b/web/src/components/LessonRedactor.vue
@@ -33,44 +33,7 @@
             </div>
           </div>
         </div>
-        <vue-draggable v-model="lesson.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
-          <div v-for="(block, index) in lesson.content">
-            <block-text v-if="block.type === 'text'"
-                        :index="index"
-                        :title.sync="block.data.title"
-                        :text.sync="block.data.text"
-                        v-on:remove="onBlockRemoved"
-                        :access-token="accessToken"/>
-            <block-image-text v-if="block.type === 'image-text'"
-                              :index="index"
-                              :title.sync="block.data.title"
-                              :text.sync="block.data.text"
-                              :image-id.sync="block.data.image_id"
-                              :image-url.sync="block.data.image_url"
-                              v-on:remove="onBlockRemoved"
-                              :access-token="accessToken"/>
-            <block-image v-if="block.type === 'image'"
-                         :index="index"
-                         :title.sync="block.data.title"
-                         :image-id.sync="block.data.image_id"
-                         :image-url.sync="block.data.image_url"
-                         v-on:remove="onBlockRemoved"
-                         :access-token="accessToken"/>
-            <block-images v-if="block.type === 'images'"
-                          :index="index"
-                          :title.sync="block.data.title"
-                          :text.sync="block.data.text"
-                          :images.sync="block.data.images"
-                          v-on:remove="onBlockRemoved"
-                          :access-token="accessToken"/>
-            <block-video v-if="block.type === 'video'"
-                         :index="index"
-                         :title.sync="block.data.title"
-                         v-on:remove="onBlockRemoved"
-                         :video-url.sync="block.data.video_url"/>
-          </div>
-        </vue-draggable>
-        <block-add v-on:added="onBlockAdded" />
+        <block-content :content.sync="lesson.content"></block-content>
 
         <div class="kit__foot">
           <button class="kit__submit btn btn_md" v-bind:class="{ loading: saving }">Сохранить</button>
@@ -81,12 +44,7 @@
 </template>
 
 <script>
-    import BlockAdd from "./blocks/BlockAdd";
-    import BlockText from './blocks/BlockText'
-    import BlockImage from './blocks/BlockImage'
-    import BlockImages from './blocks/BlockImages'
-    import BlockImageText from './blocks/BlockImageText'
-    import BlockVideo from './blocks/BlockVideo'
+    import BlockContent from './blocks/BlockContent'
     import LilImage from "./blocks/Image"
     import {api} from "../js/modules/api";
     import Draggable from 'vuedraggable';
@@ -99,20 +57,6 @@
             goBack() {
                 this.$emit('back');
             },
-            onBlockAdded(blockData) {
-                this.lesson.content.push(blockData);
-                this.$emit('update:lesson', this.lesson);
-            },
-            onBlockRemoved(blockIndex) {
-                const blockToRemove = this.lesson.content[blockIndex];
-                // Удаляем блок из Vue
-                this.lesson.content.splice(blockIndex, 1);
-                this.$emit('update:lesson', this.lesson);
-                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
-                if (blockToRemove.data.id) {
-                    api.removeContentBlock(blockToRemove, this.accessToken);
-                }
-            },
             onUpdateCoverUrl(newValue) {
                 this.lesson.coverImage = newValue;
             },
@@ -126,13 +70,7 @@
             }
         },
         components: {
-            BlockAdd,
-            'block-text': BlockText,
-            'block-image': BlockImage,
-            'block-image-text': BlockImageText,
-            'block-images': BlockImages,
-            'block-video': BlockVideo,
-            'vue-draggable': Draggable,
+            BlockContent,
             'lil-image': LilImage,
         }
     }
diff --git a/web/src/components/blocks/BlockContent.vue b/web/src/components/blocks/BlockContent.vue
new file mode 100644
index 00000000..551d6d9b
--- /dev/null
+++ b/web/src/components/blocks/BlockContent.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+  <vue-draggable :list="content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
+    <div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid">
+      <block-text v-if="block.type === 'text'"
+                  :index="index"
+                  :title.sync="block.data.title"
+                  :text.sync="block.data.text"
+                  v-on:remove="onBlockRemoved"/>
+      <block-image-text v-if="block.type === 'image-text'"
+                        :index="index"
+                        :title.sync="block.data.title"
+                        :text.sync="block.data.text"
+                        :image-id.sync="block.data.image_id"
+                        :image-url.sync="block.data.image_thumbnail_url"
+                        v-on:remove="onBlockRemoved"
+                        :access-token="$root.store.accessToken"/>
+      <block-image v-if="block.type === 'image'"
+                   :index="index"
+                   :title.sync="block.data.title"
+                   :image-id.sync="block.data.image_id"
+                   :image-url.sync="block.data.image_thumbnail_url"
+                   v-on:remove="onBlockRemoved"
+                   :access-token="$root.store.accessToken"/>
+      <block-images v-if="block.type === 'images'"
+                    :index="index"
+                    :title.sync="block.data.title"
+                    :text.sync="block.data.text"
+                    :images.sync="block.data.images"
+                    v-on:remove="onBlockRemoved"
+                    :access-token="$root.store.accessToken"/>
+      <block-video v-if="block.type === 'video'"
+                   :index="index"
+                   :title.sync="block.data.title"
+                   v-on:remove="onBlockRemoved"
+                   :video-url.sync="block.data.video_url"/>
+    </div>
+  </vue-draggable>
+
+  <block-add v-on:added="onBlockAdded"/>
+  </div>
+</template>
+
+<script>
+    import {api} from "../../js/modules/api";
+    import Draggable from 'vuedraggable';
+    import BlockText from './BlockText'
+    import BlockImage from './BlockImage'
+    import BlockImages from './BlockImages'
+    import BlockImageText from './BlockImageText'
+    import BlockVideo from './BlockVideo'
+    import BlockAdd from "./BlockAdd"
+
+    export default {
+        name: 'block-content',
+        props: ['content'],
+        methods: {
+            onBlockRemoved(blockIndex) {
+                const content = this.content;
+                const blockToRemove = this.content[blockIndex];
+                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
+                if (blockToRemove.data.id) {
+                    api.removeContentBlock(blockToRemove, this.$root.store.accessToken).then(response => {
+                        // Удаляем блок из Vue
+                        content.splice(blockIndex, 1);
+                        this.$emit('update:content', content);
+                    });
+                }
+            },
+            onBlockAdded(blockData) {
+              const content = this.content;
+              content.push(blockData);
+              this.$emit('update:content', content);
+            },
+        },
+
+        components: {
+            BlockAdd,
+            'block-text': BlockText,
+            'block-image': BlockImage,
+            'block-image-text': BlockImageText,
+            'block-images': BlockImages,
+            'block-video': BlockVideo,
+            'vue-draggable': Draggable,
+        }
+    }
+</script>
diff --git a/web/src/components/blocks/BlockImages.vue b/web/src/components/blocks/BlockImages.vue
index a99576b6..80f3a8ab 100644
--- a/web/src/components/blocks/BlockImages.vue
+++ b/web/src/components/blocks/BlockImages.vue
@@ -23,7 +23,7 @@
     </div>
     <div class="kit__gallery">
       <div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
-        <img :src="image.src" class="kit__pic">
+        <img :src="image.image_thumbnail_url" class="kit__pic">
         <button type="button" @click="onRemoveImage(index)">
           <svg class="icon icon-delete">
             <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
@@ -66,12 +66,12 @@
                         api.uploadImage(reader.result, this.accessToken)
                             .then((response) => {
                                 let images = this.images;
-                                console.log('images before', JSON.stringify(images));
                                 images.forEach((image, index) => {
                                     if (image.src === reader.result) {
-                                        images[index].img = response.data.id;
+                                        images[index].image_id = response.data.id;
                                         images[index].loading = false;
-                                        images[index].src = response.data.image;
+                                        images[index].image_url = response.data.image;
+                                        images[index].image_thumbnail_url = response.data.image_thumbnail;
                                     }
                                 });
                                 console.log('images after', JSON.stringify(images));
@@ -91,12 +91,14 @@
             },
             onRemoveImage(index) {
                 let images = this.images;
-                let id = images[index].img;
-                images.splice(index, 1);
-                this.$emit('update:images', images);
+                let id = images[index].image_id;
 
-                api.removeImage(id, this.accessToken);
+                api.removeImage(id, this.accessToken)
+                    .then(response => {
+                        images.splice(index, 1);
+                        this.$emit('update:images', images);
+                    });
             }
         }
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/web/src/components/blocks/Image.vue b/web/src/components/blocks/Image.vue
index 527df9f1..81436fbf 100644
--- a/web/src/components/blocks/Image.vue
+++ b/web/src/components/blocks/Image.vue
@@ -18,6 +18,7 @@
         data() {
             return {
                 loading: false,
+
             }
         },
         methods: {
@@ -45,7 +46,7 @@
                                 .then((response) => {
                                     this.loading = false;
                                     this.$emit('update:imageId', response.data.id);
-                                    this.$emit('update:imageUrl', response.data.image);
+                                    this.$emit('update:imageUrl', response.data.image_thumbnail);
                                 })
                                 .catch((error) => {
                                     this.loading = false;
diff --git a/web/src/js/app.js b/web/src/js/app.js
index fdc25a45..f72d6767 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -25,18 +25,29 @@ import "../sass/app.sass";
 
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
+import VueAutosize from '../components/directives/autosize'
 import Comments from '../components/Comments';
 import UploadContestWork from '../components/UploadContestWork.vue';
 import ContestWorks from '../components/ContestWorks.vue';
 import Likes from '../components/blocks/Likes.vue';
 
 Vue.use(Vuelidate);
+Vue.use(VueAutosize);
 
 if (process.env.NODE_ENV === 'development') {
   // Enable vue-devtools
   Vue.config.devtools = true;
 }
 
+const components = {
+  UploadContestWork,
+  ContestWorks,
+  Likes,
+  Comments,
+};
+
+Object.assign(components, window.LIL_STORE.components);
+
 const app = new Vue({
   el: '#lilcity-vue-app',
   data() {
@@ -44,10 +55,5 @@ const app = new Vue({
       store: window.LIL_STORE,
     }
   },
-  components: {
-    UploadContestWork,
-    ContestWorks,
-    Likes,
-    Comments,
-  }
+  components: components
 });
diff --git a/web/src/js/contest-redactor.js b/web/src/js/contest-redactor.js
index a485cac6..afbbb193 100644
--- a/web/src/js/contest-redactor.js
+++ b/web/src/js/contest-redactor.js
@@ -1,19 +1,4 @@
-import Vue from 'vue'
-import Vuelidate from 'vuelidate'
-import VueAutosize from '../components/directives/autosize'
 import ContestRedactor from '../components/ContestRedactor.vue'
 
-if (process.env.NODE_ENV === 'development') {
-    // Enable vue-devtools
-    Vue.config.devtools = true;
-}
+window.LIL_STORE.components['contest-redactor'] = ContestRedactor;
 
-Vue.use(VueAutosize);
-Vue.use(Vuelidate);
-
-let app = new Vue({
-    el: '#lilcity-vue-app',
-    components: {
-        'contest-redactor': ContestRedactor,
-    }
-});
diff --git a/web/src/js/course-redactor.js b/web/src/js/course-redactor.js
index 91cad2cf..45b3c970 100644
--- a/web/src/js/course-redactor.js
+++ b/web/src/js/course-redactor.js
@@ -1,24 +1,8 @@
-import Vue from 'vue'
-import VueAutosize from '../components/directives/autosize'
-import Vuelidate from 'vuelidate'
 import 'babel-polyfill'
 import CourseRedactor from '../components/CourseRedactor.vue'
 import $ from 'jquery';
 
-if (process.env.NODE_ENV === 'development') {
-    // Enable vue-devtools
-    Vue.config.devtools = true;
-}
-
-Vue.use(VueAutosize);
-Vue.use(Vuelidate);
-
-let app = new Vue({
-    el: '#lilcity-vue-app',
-    components: {
-        'course-redactor': CourseRedactor,
-    }
-});
+window.LIL_STORE.components['course-redactor'] = CourseRedactor;
 
 $(document).ready(function () {
     $('#course-redactor__publish-button').on('click', function () {
@@ -29,4 +13,4 @@ $(document).ready(function () {
         let event = new Event('course_preview');
         document.getElementById('lilcity__course-redactor').dispatchEvent(event);
     });
-});
\ No newline at end of file
+});
diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js
index 9d7704b3..9ce588a6 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -116,72 +116,9 @@ export const api = {
             stream: courseObject.stream,
             cover: courseObject.coverImageId ? courseObject.coverImageId : null,
             gallery: {
-                gallery_images: courseObject.gallery && courseObject.gallery.images ? courseObject.gallery.images : []
+                gallery_images: courseObject.gallery && courseObject.gallery.images || []
             },
-            content: courseObject.content.map((block, index) => {
-                if (block.type === 'text') {
-                    return {
-                        'type': 'text',
-                        'data': {
-                            'id': block.data.id ? block.data.id : null,
-                            'uuid': block.uuid,
-                            'position': ++index,
-                            'title': block.data.title,
-                            'txt': block.data.text,
-                        }
-                    }
-                } else if (block.type === 'image') {
-                    return {
-                        'type': 'image',
-                        'data': {
-                            'id': block.data.id ? block.data.id : null,
-                            'uuid': block.uuid,
-                            'position': ++index,
-                            'title': block.data.title,
-                            'img': block.data.image_id,
-                        }
-                    }
-                } else if (block.type === 'image-text') {
-                    return {
-                        'type': 'image-text',
-                        'data': {
-                            'id': block.data.id ? block.data.id : null,
-                            'uuid': block.uuid,
-                            'position': ++index,
-                            'title': block.data.title,
-                            'img': block.data.image_id,
-                            'txt': block.data.text,
-                        }
-                    }
-                } else if (block.type === 'images') {
-                    return {
-                        'type': 'images',
-                        'data': {
-                            'id': block.data.id ? block.data.id : null,
-                            'uuid': block.uuid,
-                            'position': ++index,
-                            'title': block.data.title,
-                            'images': block.data.images.map((galleryImage) => {
-                                return {
-                                    'id': galleryImage.id ? galleryImage.id : null,
-                                    'img': galleryImage.img,
-                                }
-                            }),
-                        }
-                    }
-                } else if (block.type === 'video') {
-                    return {
-                        'type': 'video',
-                        'data': {
-                            'id': block.data.id ? block.data.id : null,
-                            'uuid': block.uuid,
-                            'position': ++index,
-                            'title': block.data.title,
-                            'url': block.data.video_url,
-                        }
-                    }
-                }
-            }),
+            content: api.convertContentJson(courseObject.content, true),
         };
 
         if(courseObject.live) {
@@ -209,16 +146,70 @@ export const api = {
             short_description: lessonObject.short_description,
             course: lessonObject.course_id,
             position: lessonObject.position,
-            content: lessonObject.content.map((block, index) => {
+            content: api.convertContentJson(lessonObject.content, true),
+        };
+
+        if (isAdding) {
+            return api.addLesson(lessonJson, accessToken);
+        } else {
+            return api.updateLesson(lessonObject.id, lessonJson, accessToken);
+        }
+    },
+    convertLessonJson: (lessonJSON) => {
+        return {
+            id: lessonJSON.id,
+            title: lessonJSON.title,
+            short_description: lessonJSON.short_description,
+            coverImageId: lessonJSON.cover && lessonJSON.cover.id ? lessonJSON.cover.id : null,
+            coverImage: lessonJSON.cover && lessonJSON.cover.image ? lessonJSON.cover.image : null,
+            content: api.convertContentJson(lessonJSON.content),
+            position: lessonJSON.position,
+        }
+    },
+    convertCourseJson: (courseJSON) => {
+        let isDeferred = false;
+        let deferredDate = false;
+        let deferredTime = '';
+        if (courseJSON.deferred_start_at) {
+            let deferredDateTime = moment(courseJSON.deferred_start_at);
+            isDeferred = true;
+            deferredDate = deferredDateTime.format('MM-DD-YYYY');
+            deferredTime = deferredDateTime.format('HH:mm');
+        }
+        return {
+            id: courseJSON.id,
+            title: courseJSON.title,
+            status: courseJSON.status,
+            short_description: courseJSON.short_description,
+            category: courseJSON.category && courseJSON.category.id ? courseJSON.category.id : courseJSON.category,
+            author: courseJSON.author && courseJSON.author.id ? courseJSON.author.id : courseJSON.author,
+            price: parseFloat(courseJSON.price),
+            is_paid: parseFloat(courseJSON.price) > 0,
+            is_deferred: isDeferred,
+            date: deferredDate || courseJSON.date,
+            time: deferredTime ? {title: deferredTime, value: deferredTime} : null,
+            duration: courseJSON.duration,
+            is_featured: courseJSON.is_featured,
+            url: courseJSON.slug,
+            stream: courseJSON.stream,
+            coverImageId: courseJSON.cover && courseJSON.cover.id ? courseJSON.cover.id : null,
+            coverImage: courseJSON.cover && courseJSON.cover.image ? courseJSON.cover.image : null,
+            content: api.convertContentJson(courseJSON.content),
+            gallery: {images: (courseJSON.gallery) ? courseJSON.gallery.gallery_images:[]},
+        }
+    },
+    convertContentJson: (contentJson, forSaving) => {
+        if(forSaving){
+            return contentJson.map((block, index) => {
                 if (block.type === 'text') {
                     return {
                         'type': 'text',
                         'data': {
                             'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
                             'position': ++index,
                             'title': block.data.title,
                             'txt': block.data.text,
-                            'uuid': block.uuid,
                         }
                     }
                 } else if (block.type === 'image') {
@@ -226,10 +217,10 @@ export const api = {
                         'type': 'image',
                         'data': {
                             'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
                             'position': ++index,
                             'title': block.data.title,
                             'img': block.data.image_id,
-                            'uuid': block.uuid,
                         }
                     }
                 } else if (block.type === 'image-text') {
@@ -237,11 +228,11 @@ export const api = {
                         'type': 'image-text',
                         'data': {
                             'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
                             'position': ++index,
                             'title': block.data.title,
                             'img': block.data.image_id,
                             'txt': block.data.text,
-                            'uuid': block.uuid,
                         }
                     }
                 } else if (block.type === 'images') {
@@ -249,15 +240,15 @@ export const api = {
                         'type': 'images',
                         'data': {
                             'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
                             'position': ++index,
                             'title': block.data.title,
                             'images': block.data.images.map((galleryImage) => {
                                 return {
                                     'id': galleryImage.id ? galleryImage.id : null,
-                                    'img': galleryImage.img,
+                                    'img': galleryImage.image_id,
                                 }
                             }),
-                            'uuid': block.uuid,
                         }
                     }
                 } else if (block.type === 'video') {
@@ -265,66 +256,15 @@ export const api = {
                         'type': 'video',
                         'data': {
                             'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
                             'position': ++index,
                             'title': block.data.title,
                             'url': block.data.video_url,
-                            'uuid': block.uuid,
                         }
                     }
                 }
-            }),
-        };
-
-        if (isAdding) {
-            return api.addLesson(lessonJson, accessToken);
-        } else {
-            return api.updateLesson(lessonObject.id, lessonJson, accessToken);
+            });
         }
-    },
-    convertLessonJson: (lessonJSON) => {
-        return {
-            id: lessonJSON.id,
-            title: lessonJSON.title,
-            short_description: lessonJSON.short_description,
-            coverImageId: lessonJSON.cover && lessonJSON.cover.id ? lessonJSON.cover.id : null,
-            coverImage: lessonJSON.cover && lessonJSON.cover.image ? lessonJSON.cover.image : null,
-            content: api.convertContentResponse(lessonJSON.content),
-            position: lessonJSON.position,
-        }
-    },
-    convertCourseJson: (courseJSON) => {
-        let isDeferred = false;
-        let deferredDate = false;
-        let deferredTime = '';
-        if (courseJSON.deferred_start_at) {
-            let deferredDateTime = moment(courseJSON.deferred_start_at);
-            isDeferred = true;
-            deferredDate = deferredDateTime.format('MM-DD-YYYY');
-            deferredTime = deferredDateTime.format('HH:mm');
-        }
-        return {
-            id: courseJSON.id,
-            title: courseJSON.title,
-            status: courseJSON.status,
-            short_description: courseJSON.short_description,
-            category: courseJSON.category && courseJSON.category.id ? courseJSON.category.id : courseJSON.category,
-            author: courseJSON.author && courseJSON.author.id ? courseJSON.author.id : courseJSON.author,
-            price: parseFloat(courseJSON.price),
-            is_paid: parseFloat(courseJSON.price) > 0,
-            is_deferred: isDeferred,
-            date: deferredDate || courseJSON.date,
-            time: deferredTime ? {title: deferredTime, value: deferredTime} : null,
-            duration: courseJSON.duration,
-            is_featured: courseJSON.is_featured,
-            url: courseJSON.slug,
-            stream: courseJSON.stream,
-            coverImageId: courseJSON.cover && courseJSON.cover.id ? courseJSON.cover.id : null,
-            coverImage: courseJSON.cover && courseJSON.cover.image ? courseJSON.cover.image : null,
-            content: api.convertContentResponse(courseJSON.content),
-            gallery: {images: (courseJSON.gallery) ? courseJSON.gallery.gallery_images:[]},
-        }
-    },
-    convertContentResponse: (contentJson) => {
         return contentJson.sort((a, b) => {
             if (a.position < b.position) {
                 return -1;
@@ -353,6 +293,7 @@ export const api = {
                         'title': contentItem.title,
                         'image_id': (contentItem.img) ? contentItem.img.id:null,
                         'image_url': (contentItem.img) ? contentItem.img.image:null,
+                        'image_thumbnail_url': (contentItem.img) ? contentItem.img.image_thumbnail:null,
                     }
                 }
             } else if (contentItem.type === 'image-text') {
@@ -364,6 +305,7 @@ export const api = {
                         'title': contentItem.title,
                         'image_id': (contentItem.img) ? contentItem.img.id:null,
                         'image_url': (contentItem.img) ? contentItem.img.image:null,
+                        'image_thumbnail_url': (contentItem.img) ? contentItem.img.image_thumbnail:null,
                         'text': contentItem.txt,
                     }
                 }
@@ -377,8 +319,9 @@ export const api = {
                         'images': contentItem.gallery_images.map((galleryImage) => {
                             return {
                                 'id': galleryImage.id,
-                                'img': galleryImage.img.id,
-                                'src': galleryImage.img.image,
+                                'image_id': galleryImage.img.id,
+                                'image_url': galleryImage.img.image,
+                                'image_thumbnail_url': galleryImage.img.image_thumbnail,
                             }
                         }),
                     }