diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html
index b9dc4fea..1b39b2ee 100644
--- a/project/templates/lilcity/edit_index.html
+++ b/project/templates/lilcity/edit_index.html
@@ -47,7 +47,7 @@
         <a class="header__logo logo" href="/"></a>
         <div class="header__actions">
           <div id="course-redactor__saving-status" class="header__status"></div>
-          <button class="header__btn btn btn_icon">
+          <button id="course-redactor__preview-button" class="header__btn btn btn_icon">
             <svg class="icon icon-eye">
               <use xlink:href="{% static 'img/sprite.svg' %}#icon-eye"></use>
             </svg>
diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue
index 18e850f2..0109d2ca 100644
--- a/web/src/components/CourseRedactor.vue
+++ b/web/src/components/CourseRedactor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="lilcity__course-redactor" v-on:course_publish="onCoursePublish">
+  <div id="lilcity__course-redactor" v-on:course_publish="onCoursePublish" v-on:course_preview="onCoursePreview">
     <div v-if="!courseLoading">
       <form v-if="viewSection !== 'lessons-edit'" @submit.prevent="onSubmit">
         <div class="info">
@@ -10,9 +10,11 @@
                   <div class="info__ava ava">
                     <img :src="authorPicture" alt="Аватар" class="ava__pic">
                   </div>
-                  <div class="info__group">
+                  <div v-if="me" class="info__group info__field--light">
                     <div class="info__label">АВТОР</div>
-                    <div class="info__value">{{ authorName }}</div>
+                    <div v-if="me.role != ROLE_ADMIN" class="info__value">{{ authorName }}</div>
+                    <div v-else class="info__value"><lil-select :value.sync="userSelect" :options="users"
+                                                                placeholder="Выберите автора"/></div>
                   </div>
                 </div>
                 <div class="info__upload upload">
@@ -239,6 +241,7 @@
 </template>
 
 <script>
+    import { ROLE_ADMIN, ROLE_AUTHOR } from './consts'
     import LinkInput from './inputs/LinkInput'
     import DatePicker from 'vuejs-datepicker'
     import BlockText from './blocks/BlockText'
@@ -251,6 +254,7 @@
     import {api} from "../js/modules/api";
     import BlockAdd from "./blocks/BlockAdd";
     import debounce from 'lodash.debounce';
+    import $ from 'jquery';
     import {required, minValue, numeric } from 'vuelidate/lib/validators'
 
     export default {
@@ -259,11 +263,15 @@
         data() {
             return {
                 viewSection: 'course',
+                me: null,
+                users: null,
+                ROLE_ADMIN: ROLE_ADMIN,
                 course: {
                     title: '',
                     category: null,
                     categorySelect: null,
                     duration: 1,
+                    author: null,
                     price: 0,
                     url: '',
                     coverImage: '',
@@ -492,6 +500,19 @@
             },
             onCoursePublish() {
                 console.log('publish course');
+                const publishButton = $('#course-redactor__publish-button');
+                publishButton.attr('disabled', 'disabled');
+                api.publishCourse(this.course.id, this.accessToken)
+                    .then((response) => {
+                        document.getElementById('course-redactor__saving-status').innerText = 'НА МОДЕРАЦИИ';
+                    })
+                    .catch(() => {
+                        publishButton.removeAttr('disabled');
+                    });
+            },
+            onCoursePreview() {
+                let newTab = window.open(`/course/${this.course.id}`, '_blank');
+                newTab.focus();
             },
             saveCourseDraft: debounce(function (newValue, oldValue) {
                 if (!oldValue.id) {
@@ -528,6 +549,27 @@
                     this.updateCategory();
                 });
 
+            api.getCurrentUser(this.accessToken)
+                .then((response) => {
+                    if (response.data) {
+                        this.me = response.data;
+
+                        if(this.me.role == ROLE_ADMIN) {
+                            api.getUsers({role: [ROLE_AUTHOR,ROLE_ADMIN], page_size: 1000}, this.accessToken)
+                                .then((usersResponse) => {
+                                    if (usersResponse.data) {
+                                        this.users = usersResponse.data.results.map((user) => {
+                                            return {
+                                                title: `${user.first_name} ${user.last_name} (${user.email})`,
+                                                value: user.id
+                                            }
+                                        });
+                                    }
+                                });
+                        }
+                    }
+                });
+
             if (this.courseId) {
                 this.loadCourse()
             } else {
@@ -563,6 +605,23 @@
                     this.course.category = value.value;
                 }
             },
+            userSelect: {
+                get() {
+                    if (!this.users || this.users.length === 0 || !this.course || !this.course.author) {
+                        return null;
+                    }
+                    let value;
+                    this.users.forEach((user) => {
+                        if (user.value === this.course.author) {
+                            value = user;
+                        }
+                    });
+                    return value;
+                },
+                set(value) {
+                    this.course.author = value.value;
+                }
+            },
             courseFullUrl() {
               let suffix = this.course.url ? this.course.url : 'ваша_ссылка';
               return `https://lil.city/course/${suffix}`;
diff --git a/web/src/components/blocks/Image.vue b/web/src/components/blocks/Image.vue
index ce21b88a..9006500d 100644
--- a/web/src/components/blocks/Image.vue
+++ b/web/src/components/blocks/Image.vue
@@ -48,5 +48,7 @@
   .kit__photo-image {
     width: 140px;
     height: 110px;
+    display: block;
+    object-fit: contain;
   }
 </style>
\ No newline at end of file
diff --git a/web/src/components/consts.js b/web/src/components/consts.js
new file mode 100644
index 00000000..c078d72e
--- /dev/null
+++ b/web/src/components/consts.js
@@ -0,0 +1,3 @@
+export const ROLE_USER = 0;
+export const ROLE_AUTHOR = 1;
+export const ROLE_ADMIN = 2;
\ No newline at end of file
diff --git a/web/src/js/course-redactor.js b/web/src/js/course-redactor.js
index a2f32238..b1862f46 100644
--- a/web/src/js/course-redactor.js
+++ b/web/src/js/course-redactor.js
@@ -25,4 +25,8 @@ $(document).ready(function () {
         let event = new Event('course_publish');
         document.getElementById('lilcity__course-redactor').dispatchEvent(event);
     });
+    $('#course-redactor__preview-button').on('click', 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 cded5e99..232da06c 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -5,6 +5,21 @@ axios.defaults.headers.post['Content-Type'] = 'application/json';
 axios.defaults.headers.post['Accept'] = 'application/json';
 
 export const api = {
+    getCurrentUser: (accessToken) => {
+        return axios.get('/api/v1/users/me/', {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
+    getUsers: (params, accessToken) => {
+        return axios.get('/api/v1/users/', {
+            params: params,
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
     getCategories: (accessToken) => {
         return axios.get('/api/v1/categories/', {
             headers: {
@@ -222,6 +237,7 @@ export const api = {
             title: courseJSON.title,
             short_description: courseJSON.short_description,
             category: courseJSON.category.id ? courseJSON.category.id : courseJSON.category,
+            author: courseJSON.author.id ? courseJSON.author.id : courseJSON.author,
             price: parseFloat(courseJSON.price),
             is_paid: parseFloat(courseJSON.price) > 0,
             is_deferred: isDeferred,
@@ -378,5 +394,12 @@ export const api = {
                 'Authorization': `Token ${accessToken}`,
             }
         });
+    },
+    publishCourse: (courseId, accessToken) => {
+        return axios.patch(`/api/v1/courses/${courseId}/`, {status: 1}, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
     }
 };
\ No newline at end of file