diff --git a/apps/common/mobile/lib/controller/Collaboration.js b/apps/common/mobile/lib/controller/Collaboration.js
index efd3be179..4c53dd461 100644
--- a/apps/common/mobile/lib/controller/Collaboration.js
+++ b/apps/common/mobile/lib/controller/Collaboration.js
@@ -223,7 +223,7 @@ define([
                 editUsers = users;
             },
 
-            initEditUsers: function() {
+            getUsersInfo: function() {
                 var usersArray = [];
                 _.each(editUsers, function(item){
                     var fio = item.asc_getUserName().split(' ');
@@ -248,6 +248,11 @@ define([
                     }
                 });
                 var userSort = _.chain(usersArray).groupBy('idOriginal').value();
+                return userSort;
+            },
+
+            initEditUsers: function() {
+                var users = this.getUsersInfo();
                 var templateUserItem = _.template([
                     '<%  _.each(users, function (user) { %>',
                     '<li id="<%= user[0].id %>" class="<% if (user[0].view) {%> viewmode <% } %> item-content">' +
@@ -263,7 +268,7 @@ define([
                     this.textEditUser +
                     '</div></div>' +
                     '<ul>' +
-                    templateUserItem({users: userSort}) +
+                    templateUserItem({users: users}) +
                     '</ul>');
                 $('#user-list').html(templateUserList());
             },
@@ -680,6 +685,14 @@ define([
             },
 
             //Comments
+            getInitials: function(name) {
+                var fio = name.split(' ');
+                var initials = fio[0].substring(0, 1).toUpperCase();
+                if (fio.length > 1) {
+                    initials += fio[fio.length - 1].substring(0, 1).toUpperCase();
+                }
+                return initials;
+            },
 
             findComment: function(uid) {
                 var comment;
@@ -738,14 +751,14 @@ define([
                             '<div class="swipe-container">' +
                                 '<div class="icon-swipe"></div>' +
                             '</div>' +
-                            '<div class="toolbar toolbar-bottom">' +
+                            '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
                                 '<div class="toolbar-inner">' +
                                     '<div class="button-left">' +
                                         '<a href="#" class="link add-reply">' + me.textAddReply + '</a>' +
                                     '</div>' +
                                     '<div class="button-right">' +
-                                        '<a href="#" class="link prev-comment"><i class="icon-arrow-comment left"></i></a>' +
-                                        '<a href="#" class="link next-comment"><i class="icon-arrow-comment right"></i></a>' +
+                                        '<a href="#" class="link prev-comment"><i class="icon icon-arrow-comment left"></i></a>' +
+                                        '<a href="#" class="link next-comment"><i class="icon icon-arrow-comment right"></i></a>' +
                                     '</div>' +
                                 '</div>' +
                             '</div>' +
@@ -781,25 +794,46 @@ define([
                 $swipeContainer.single('touchstart', _.bind(function(e){
                     var touchobj = e.changedTouches[0];
                     me.swipeStart = parseInt(touchobj.clientY);
+                    me.swipeChange = parseInt(touchobj.clientY);
+                    me.swipeHeight = parseInt($('.container-view-comment').css('height'));
+                    e.preventDefault();
+                }, me));
+                $swipeContainer.single('touchmove', _.bind(function(e){
+                    var touchobj = e.changedTouches[0];
+                    var dist = parseInt(touchobj.clientY) - me.swipeStart;
+                    var newHeight;
+                    if (dist < 0) {
+                        newHeight = '100%';
+                        me.swipeFull = true;
+                        me.closeCommentPicker = false;
+                        $('.container-view-comment').css('opacity', '1');
+                    } else if (dist < 100) {
+                        newHeight = '50%';
+                        me.swipeFull = false;
+                        me.closeCommentPicker = false;
+                        $('.container-view-comment').css('opacity', '1');
+                    } else {
+                        me.closeCommentPicker = true;
+                        $('.container-view-comment').css('opacity', '0.6');
+                    }
+                    $('.container-view-comment').css('height', newHeight);
+                    me.swipeHeight = newHeight;
                     e.preventDefault();
                 }, me));
                 $swipeContainer.single('touchend', _.bind(function (e) {
                     var touchobj = e.changedTouches[0];
                     var swipeEnd = parseInt(touchobj.clientY);
                     var dist = swipeEnd - me.swipeStart;
-                    if (dist > 20) {
-                        if (me.swipeFull) {
+                    if (me.closeCommentPicker) {
+                        uiApp.closeModal();
+                    } else if (me.swipeFull) {
+                        if (dist > 20) {
                             $('.container-view-comment').css('height', '50%');
-                            me.swipeFull = false;
-                        } else {
-                            uiApp.closeModal();
                         }
-                    } else if (dist < 0) {
-                        $('.container-view-comment').css('height', '100%');
-                        me.swipeFull = true;
-                    } else {
-                        $('.container-view-comment').css('height', '50%');
                     }
+                    me.swipeHeight = undefined;
+                    me.swipeChange = undefined;
+                    me.closeCommentPicker = undefined;
                 }, me));
 
                 $('.prev-comment').single('click', _.bind(me.onViewPrevComment, me));
@@ -808,6 +842,21 @@ define([
                 $('.add-reply').single('click', _.bind(me.onClickAddReply, me));
                 $('.reply-menu').single('click', _.bind(me.initReplyMenu, me));
                 $('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me));
+
+                me.updateDisabledCommentArrow();
+            },
+
+            updateDisabledCommentArrow: function() {
+                if (this.indexCurrentComment === 0) {
+                    $('.prev-comment').addClass('disabled');
+                } else {
+                    $('.prev-comment').removeClass('disabled');
+                }
+                if (this.indexCurrentComment + 1 === this.showComments.length) {
+                    $('.next-comment').addClass('disabled');
+                } else {
+                    $('.next-comment').removeClass('disabled');
+                }
             },
 
             onViewPrevComment: function() {
@@ -817,6 +866,7 @@ define([
                     $('.comment-menu').single('click', _.bind(this.initMenuComments, this));
                     $('.reply-menu').single('click', _.bind(this.initReplyMenu, this));
                     $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this));
+                    this.updateDisabledCommentArrow();
                 }
             },
 
@@ -827,11 +877,13 @@ define([
                     $('.comment-menu').single('click', _.bind(this.initMenuComments, this));
                     $('.reply-menu').single('click', _.bind(this.initReplyMenu, this));
                     $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this));
+                    this.updateDisabledCommentArrow();
                 }
             },
 
             onClickAddReply: function() {
                 var me = this;
+                var isAndroid = Framework7.prototype.device.android === true;
                 if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) {
                     var addReplyView,
                         comment = this.showComments[this.indexCurrentComment];
@@ -840,16 +892,24 @@ define([
                             '<div class="popup container-add-reply">' +
                             '<div class="navbar">' +
                             '<div class="navbar-inner">' +
-                            '<div class="left sliding"><a href="#" class="back link close-popup"> <i class="icon icon-close"></i>' + '<span>' + me.textCancel + '</span>'+ '</a></div>' +
+                            '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>') + '</a></div>' +
                             '<div class="center sliding">' + me.textAddReply + '</div>' +
-                            '<div class="right sliding"><a href="#" class="link done-reply"><i class="icon icon-done"></i>' + '<span>' + me.textDone + '</span>' + '</a></div>' +
+                            '<div class="right sliding"><a href="#" class="link done-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
                             '</div>' +
                             '</div>' +
+                            '<div class="pages">' +
+                            '<div class="page page-add-comment">' +
+                            '<div class="page-content">' +
                             '<div class="wrap-comment">' +
+                            (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
                             '<div class="user-name">' + comment.username + '</div>' +
                             '<div class="comment-date">' + comment.date + '</div>' +
+                            (isAndroid ? '</div></div>' : '') +
                             '<div><textarea class="reply-textarea">'+ '</textarea></div>' +
                             '</div>' +
+                            '</div>' +
+                            '</div>' +
+                            '</div>' +
                             '</div>'
                         );
                         $('.popup').css('z-index', '20000');
@@ -953,25 +1013,28 @@ define([
                     date: me.dateToLocaleTimeString(date),
                     userid: _userId,
                     username: me.currentUser.asc_getUserName(),
-                    usercolor: me.currentUser.asc_getColor()
+                    usercolor: me.currentUser.asc_getColor(),
+                    userInitials: me.getInitials(me.currentUser.asc_getUserName())
                 };
 
                 if (Common.SharedSettings.get('phone')) {
-                    modalView = $$(uiApp.pickerModal(
-                        '<div class="picker-modal container-view-add-comment">' +
+                    modalView = $$(uiApp.popup(
+                        '<div class="popup container-view-add-comment">' +
                             '<div class="navbar">' +
                                 '<div class="navbar-inner">' +
-                                    '<div class="left sliding"><a href="#" class="back link close-picker"> <i class="icon icon-close"></i>' +  (!isAndroid ? '<span>' + me.textCancel + '</span>' : '') + '</a></div>' +
+                                    '<div class="left sliding"><a href="#" class="back link close-picker"> <i class="icon icon-close-comment"></i>' +  (!isAndroid ? '<span>' + me.textCancel + '</span>' : '') + '</a></div>' +
                                     '<div class="center sliding">' + me.textAddComment + '</div>' +
-                                    '<div class="right sliding"><a href="#" class="link" id="add-comment"><i class="icon icon-done"></i>' + (!isAndroid ? '<span>' + me.textDone + '</span>' : '') + '</a></div>' +
+                                    '<div class="right sliding"><a href="#" class="link" id="add-comment"><i class="icon icon-done-comment"></i>' + (!isAndroid ? '<span>' + me.textDone + '</span>' : '') + '</a></div>' +
                                 '</div>' +
                             '</div>' +
                             '<div class="pages">' +
                                 '<div class="page page-add-comment">' +
                                     '<div class="page-content">' +
                                         '<div class="wrap-comment">' +
+                                            (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
                                             '<div class="user-name">' + comment.username + '</div>' +
                                             '<div class="comment-date">' + comment.date + '</div>' +
+                                            (isAndroid ? '</div></div>' : '') +
                                             '<div><textarea id="comment-text" class="comment-textarea"></textarea></div>' +
                                         '</div>' +
                                     '</div>' +
@@ -1050,7 +1113,8 @@ define([
                     }
                     _menuItems.push({
                         caption: me.textDeleteComment,
-                        event: 'delete'
+                        event: 'delete',
+                        color: 'red'
                     });
                     _.each(_menuItems, function (item) {
                         item.text = item.caption;
@@ -1079,7 +1143,8 @@ define([
                     });
                     _menuItems.push({
                         caption: me.textDeleteReply,
-                        event: 'deletereply'
+                        event: 'deletereply',
+                        color: 'red'
                     });
                     _.each(_menuItems, function (item) {
                         item.text = item.caption;
@@ -1214,7 +1279,8 @@ define([
             },
 
             showEditCommentModal: function() {
-                var me = this;
+                var me = this,
+                    isAndroid = Framework7.prototype.device.android === true;
                 if (this.indexCurrentComment > -1 && this.indexCurrentComment < this.showComments.length) {
                     var comment = this.showComments[this.indexCurrentComment];
                     if (Common.SharedSettings.get('phone')) {
@@ -1222,16 +1288,24 @@ define([
                             '<div class="popup container-edit-comment">' +
                             '<div class="navbar">' +
                             '<div class="navbar-inner">' +
-                            '<div class="left sliding"><a href="#" class="back link close-popup"> <i class="icon icon-close"></i>' + '<span>' + me.textCancel + '</span>'+ '</a></div>' +
+                            '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? ' <i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>')+ '</a></div>' +
                             '<div class="center sliding">' + me.textEditComment + '</div>' +
-                            '<div class="right sliding"><a href="#" class="link" id="edit-comment"><i class="icon icon-done"></i>' + '<span>' + me.textDone + '</span>' + '</a></div>' +
+                            '<div class="right sliding"><a href="#" class="link" id="edit-comment">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
                             '</div>' +
                             '</div>' +
+                            '<div class="pages">' +
+                            '<div class="page page-add-comment">' +
+                            '<div class="page-content">' +
                             '<div class="wrap-comment">' +
+                            (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
                             '<div class="user-name">' + comment.username + '</div>' +
                             '<div class="comment-date">' + comment.date + '</div>' +
+                            (isAndroid ? '</div></div>' : '') +
                             '<div><textarea id="comment-text" class="comment-textarea">' + comment.comment + '</textarea></div>' +
                             '</div>' +
+                            '</div>' +
+                            '</div>' +
+                            '</div>' +
                             '</div>'
                         );
                         $('.popup').css('z-index', '20000');
@@ -1263,6 +1337,7 @@ define([
                         comment,
                         replies,
                         reply;
+                    var isAndroid = Framework7.prototype.device.android === true;
                     this.showComments && (comment = this.showComments[indComment]);
                     comment && (replies = comment.replys);
                     replies && (reply = replies[indReply]);
@@ -1272,16 +1347,24 @@ define([
                                 '<div class="popup container-edit-comment">' +
                                 '<div class="navbar">' +
                                 '<div class="navbar-inner">' +
-                                '<div class="left sliding"><a href="#" class="back link close-popup"> <i class="icon icon-close"></i>' + '<span>' + me.textCancel + '</span>' + '</a></div>' +
+                                '<div class="left sliding"><a href="#" class="back link close-popup">' + (isAndroid ? '<i class="icon icon-close-comment"></i>' : '<span>' + me.textCancel + '</span>') + '</a></div>' +
                                 '<div class="center sliding">' + me.textEditReply + '</div>' +
-                                '<div class="right sliding"><a href="#" class="link" id="edit-reply"><i class="icon icon-done"></i>' + '<span>' + me.textDone + '</span>' + '</a></div>' +
+                                '<div class="right sliding"><a href="#" class="link" id="edit-reply">' + (isAndroid ? '<i class="icon icon-done-comment"></i>' : '<span>' + me.textDone + '</span>') + '</a></div>' +
                                 '</div>' +
                                 '</div>' +
+                                '<div class="pages">' +
+                                '<div class="page page-add-comment">' +
+                                '<div class="page-content">' +
                                 '<div class="wrap-comment">' +
+                                (isAndroid ? '<div class="header-comment"><div class="initials-comment" style="background-color: '+ comment.usercolor + ';">' + comment.userInitials + '</div><div>' : '') +
                                 '<div class="user-name">' + reply.username + '</div>' +
                                 '<div class="comment-date">' + reply.date + '</div>' +
+                                (isAndroid ? '</div></div>' : '') +
                                 '<div><textarea id="comment-text" class="reply-textarea">' + reply.reply + '</textarea></div>' +
                                 '</div>' +
+                                '</div>' +
+                                '</div>' +
+                                '</div>' +
                                 '</div>'
                             );
                             $('.popup').css('z-index', '20000');
@@ -1396,14 +1479,16 @@ define([
                             ((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
 
                         var user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()});
+                        var username = data.asc_getReply(i).asc_getUserName();
                         replies.push({
                             ind                  : i,
                             userid              : data.asc_getReply(i).asc_getUserId(),
-                            username            : data.asc_getReply(i).asc_getUserName(),
+                            username            : username,
                             usercolor           : (user) ? user.asc_getColor() : null,
                             date                : this.dateToLocaleTimeString(date),
                             reply               : data.asc_getReply(i).asc_getText(),
-                            time                : date.getTime()
+                            time                : date.getTime(),
+                            userInitials        : this.getInitials(username)
                         });
                     }
                 }
@@ -1415,10 +1500,11 @@ define([
                     ((data.asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getTime())));
                 var user = _.findWhere(editUsers, {idOriginal: data.asc_getUserId()}),
                     groupname = id.substr(0, id.lastIndexOf('_')+1).match(/^(doc|sheet[0-9_]+)_/);
+                var username = data.asc_getUserName();
                 var comment = {
                     uid                 : id,
                     userid              : data.asc_getUserId(),
-                    username            : data.asc_getUserName(),
+                    username            : username,
                     usercolor           : (user) ? user.asc_getColor() : null,
                     date                : this.dateToLocaleTimeString(date),
                     quote               : data.asc_getQuoteText(),
@@ -1427,7 +1513,8 @@ define([
                     unattached          : !_.isUndefined(data.asc_getDocumentFlag) ? data.asc_getDocumentFlag() : false,
                     time                : date.getTime(),
                     replys              : [],
-                    groupName           : (groupname && groupname.length>1) ? groupname[1] : null
+                    groupName           : (groupname && groupname.length>1) ? groupname[1] : null,
+                    userInitials        : this.getInitials(username)
                 };
                 if (comment) {
                     var replies = this.readSDKReplies(data);
@@ -1473,14 +1560,16 @@ define([
                             ((data.asc_getReply(i).asc_getTime() == '') ? new Date() : new Date(this.stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
 
                         user = _.findWhere(editUsers, {idOriginal: data.asc_getReply(i).asc_getUserId()});
+                        var username = data.asc_getReply(i).asc_getUserName();
                         replies.push({
                             ind                 : i,
                             userid              : data.asc_getReply(i).asc_getUserId(),
-                            username            : data.asc_getReply(i).asc_getUserName(),
+                            username            : username,
                             usercolor           : (user) ? user.asc_getColor() : null,
                             date                : me.dateToLocaleTimeString(dateReply),
                             reply               : data.asc_getReply(i).asc_getText(),
-                            time                : dateReply.getTime()
+                            time                : dateReply.getTime(),
+                            userInitials        : me.getInitials(username)
                         });
                     }
                     comment.replys = replies;
diff --git a/apps/common/mobile/lib/view/Collaboration.js b/apps/common/mobile/lib/view/Collaboration.js
index 3765c858e..d6ebec855 100644
--- a/apps/common/mobile/lib/view/Collaboration.js
+++ b/apps/common/mobile/lib/view/Collaboration.js
@@ -149,6 +149,7 @@ define([
             //Comments
 
             renderViewComments: function(comments, indCurComment) {
+                var isAndroid = Framework7.prototype.device.android === true;
                 if ($('.page-view-comments .page-content').length > 0) {
                     var template = '';
                     if (comments && comments.length > 0) {
@@ -157,10 +158,15 @@ define([
                         var comment = comments[indCurComment];
                         template += '<li class="comment item-content">' +
                             '<div class="item-inner">' +
-                            '<div class="header-comment"><div>' +
-                            '<p class="user-name">' + comment.username + '</p>' +
+                            '<div class="header-comment"><div class="comment-left">';
+                        if (isAndroid) {
+                            template += '<div class="initials-comment" style="background-color: ' + comment.usercolor + ';">' + comment.userInitials + '</div><div>';
+                        }
+                        template += '<p class="user-name">' + comment.username + '</p>' +
                             '<p class="comment-date">' + comment.date + '</p>';
-                        if (comment.quote) template += '<p class="comment-quote" data-ind="' + comment.uid + '">' + comment.quote + '</p>';
+                        if (isAndroid) {
+                            template += '</div>';
+                        }
                         template += '</div>';
                         template += '<div class="comment-right">' +
                             '<div class="comment-resolve"><i class="icon icon-resolve-comment' + (comment.resolved ? ' check' : '') + '"></i></div>' +
@@ -168,17 +174,24 @@ define([
                             '</div>' +
                             '</div>';
 
+                        if (comment.quote) template += '<p class="comment-quote" data-ind="' + comment.uid + '">' + comment.quote + '</p>';
                         template += '<p class="comment-text">' + comment.comment + '</p>';
                         if (comment.replys.length > 0) {
                             template += '<ul class="list-reply">';
                             _.each(comment.replys, function (reply) {
                                 template += '<li class="reply-item" data-ind="' + reply.ind + '">' +
                                     '<div class="header-reply">' +
-                                    '<div>' +
-                                    '<p class="user-name">' + reply.username + '</p>' +
+                                    '<div class="reply-left">';
+                                if (isAndroid) {
+                                    template += '<div class="initials-reply" style="background-color: ' + reply.usercolor + ';">' + reply.userInitials + '</div><div>'
+                                }
+                                template += '<p class="user-name">' + reply.username + '</p>' +
                                     '<p class="reply-date">' + reply.date + '</p>' +
-                                    '</div>' +
-                                    '<div class="reply-menu"><i class="icon icon-menu-comment"></i></div>' +
+                                    '</div>';
+                                if (isAndroid) {
+                                    template += '</div>';
+                                }
+                                template += '<div class="reply-menu"><i class="icon icon-menu-comment"></i></div>' +
                                     '</div>' +
                                     '<p class="reply-text">' + reply.reply + '</p>' +
                                     '</li>';
diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less
index 5fd698055..68bebd264 100644
--- a/apps/common/mobile/resources/less/ios/_collaboration.less
+++ b/apps/common/mobile/resources/less/ios/_collaboration.less
@@ -180,12 +180,15 @@
   .navbar {
     background-color: #FFFFFF;
   }
+  .page {
+    background-color: #FFFFFF;
+  }
 }
 
 //view comment
 .container-view-comment {
   -webkit-transition: height 100ms;
-  transition: height 100ms;
+  transition: height 120ms;
   background-color: #FFFFFF;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -279,6 +282,9 @@
       margin-left: 0;
     }
   }
+  .page {
+    background-color: #FFFFFF;
+  }
 }
 
 .icon-arrow-comment {
@@ -299,3 +305,7 @@
     -webkit-transform: rotate(135deg);
   }
 }
+
+.actions-modal-button.color-red {
+  color: @red;
+}
diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less
index ea3cdf0f0..7760211d6 100644
--- a/apps/common/mobile/resources/less/material/_collaboration.less
+++ b/apps/common/mobile/resources/less/material/_collaboration.less
@@ -89,9 +89,8 @@
   }
 }
 
-
 //Comments
-.page-comments {
+.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply {
   .list-block .item-inner {
     display: block;
     padding: 16px 0;
@@ -99,13 +98,13 @@
   }
   p {
     margin: 0;
+    word-break: break-word;
   }
   .user-name {
-    font-size: 17px;
+    font-size: 16px;
     line-height: 22px;
     color: #000000;
     margin: 0;
-    font-weight: bold;
   }
   .comment-date, .reply-date {
     font-size: 12px;
@@ -123,24 +122,14 @@
     padding-right: 15px;
   }
   .reply-item {
-    margin-top: 15px;
-    .user-name {
-      padding-top: 16px;
+    padding-right: 16px;
+    padding-top: 13px;
+    .header-reply {
+      display: flex;
+      justify-content: space-between;
     }
-    &:before {
-      content: '';
-      position: absolute;
-      left: auto;
-      bottom: 0;
-      right: auto;
-      top: 0;
-      height: 1px;
-      width: 100%;
-      background-color: @listBlockBorderColor;
-      display: block;
-      z-index: 15;
-      -webkit-transform-origin: 50% 100%;
-      transform-origin: 50% 100%;
+    .user-name {
+      padding-top: 3px;
     }
   }
   .comment-quote {
@@ -150,7 +139,193 @@
     margin: 5px 0;
     font-size: 15px;
   }
+
+  .wrap-comment {
+    padding: 16px 0 0 0;
+  }
+  .comment-textarea, .reply-textarea {
+    margin-top: 10px;
+    background:transparent;
+    border:none;
+    outline:none;
+    width: 100%;
+    min-height: 200px;
+    font-size: 15px;
+  }
+
+  .header-comment {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 16px;
+    margin-bottom: 13px;
+    .comment-right {
+      display: flex;
+      justify-content: space-between;
+      width: 70px;
+    }
+    .comment-left {
+      display: flex;
+      justify-content: space-between;
+    }
+    .initials-comment {
+      height: 40px;
+      width: 40px;
+      border-radius: 50px;
+      color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 16px;
+      font-size: 18px;
+    }
+  }
+  .header-reply {
+    .reply-left {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+    .initials-reply {
+      width: 24px;
+      height: 24px;
+      color: #FFFFFF;
+      font-size: 11px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 16px;
+      border-radius: 50px;
+      margin-top: 5px;
+    }
+  }
 }
 .settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after {
   display: none;
+}
+
+.container-edit-comment {
+  .navbar {
+    background-color: #FFFFFF;
+    color: @themeColor;
+  }
+}
+
+//view comment
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 50%;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+  .page-view-comments {
+    background-color: #FFFFFF;
+    .list-block {
+      margin-bottom: 120px;
+      ul:before, ul:after {
+        content: none;
+      }
+      .item-inner {
+        padding: 0;
+      }
+    }
+
+  }
+  .toolbar {
+    position: absolute;
+    background-color: #FFFFFF;
+    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+    &.toolbar-bottom {
+      top: auto;
+    }
+    &:before {
+      content: none;
+    }
+    a {
+      &.link {
+        color: @themeColor;
+        font-size: 16px;
+      }
+    }
+    .toolbar-inner {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 16px;
+      .button-left {
+        min-width: 80px;
+      }
+      .button-right {
+        min-width: 62px;
+        display: flex;
+        justify-content: space-between;
+        a {
+          padding: 0 8px;
+        }
+      }
+    }
+  }
+  .swipe-container {
+    display: flex;
+    justify-content: center;
+    height: 40px;
+    .icon-swipe {
+      margin-top: 8px;
+      width: 40px;
+      height: 4px;
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 2px;
+    }
+  }
+  .list-block {
+    margin-top: 0;
+  }
+}
+
+.container-view-add-comment, .container-edit-comment, .container-add-reply, container-edit-comment {
+  height: 100%;
+  .navbar {
+    background-color: #FFFFFF;
+    color: #000;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: auto;
+      top: auto;
+      height: 1px;
+      width: 100%;
+      background-color: #c4c4c4;
+      display: block;
+      z-index: 15;
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+    }
+    .navbar-inner {
+      justify-content: space-between;
+    }
+    a.link i + span {
+      margin-left: 0;
+    }
+    .center {
+      font-size: 18px;
+    }
+    .right {
+      margin-left: 0;
+    }
+  }
+  .page-add-comment {
+    background-color: #FFFFFF;
+    .page-content {
+      padding: 0 16px 80px;
+    }
+  }
+  .header-comment {
+    justify-content: flex-start;
+  }
+}
+
+.actions-modal-button.color-red {
+  color: @red;
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index c5f043d0f..868b521d0 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -6626,9 +6626,12 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-edit-comment .navbar {
   background-color: #FFFFFF;
 }
+.container-edit-comment .page {
+  background-color: #FFFFFF;
+}
 .container-view-comment {
   -webkit-transition: height 100ms;
-  transition: height 100ms;
+  transition: height 120ms;
   background-color: #FFFFFF;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -6721,6 +6724,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-add-reply .navbar a.link i + span {
   margin-left: 0;
 }
+.container-add-reply .page {
+  background-color: #FFFFFF;
+}
 .icon-arrow-comment {
   border: solid black;
   border-width: 0 2px 2px 0;
@@ -6738,6 +6744,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
 }
+.actions-modal-button.color-red {
+  color: #ff3b30;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
   margin-right: 10px;
 }
@@ -7292,7 +7301,7 @@ i.icon.icon-resolve-comment {
 i.icon.icon-resolve-comment.check {
   width: 30px;
   height: 30px;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H30V30H0V0Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.6195%2020.8555C11.8237%2021.0673%2012.1658%2021.0577%2012.358%2020.8349L22.516%209.05783C22.7843%208.74676%2022.7528%208.27781%2022.4453%208.00545V8.00545C22.1315%207.72756%2021.651%207.7604%2021.3779%208.07839L12.3546%2018.587C12.1638%2018.8092%2011.8238%2018.8206%2011.6186%2018.6117L8.10643%2015.0366C7.81575%2014.7407%207.34084%2014.7345%207.04258%2015.0228V15.0228C6.74283%2015.3125%206.73444%2015.7903%207.02383%2016.0904L11.6195%2020.8555Z%22%20fill%3D%22%235B9F27%22%2F%3E%3C%2Fsvg%3E");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H30V30H0V0Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.6195%2020.8555C11.8237%2021.0673%2012.1658%2021.0577%2012.358%2020.8349L22.516%209.05783C22.7843%208.74676%2022.7528%208.27781%2022.4453%208.00545V8.00545C22.1315%207.72756%2021.651%207.7604%2021.3779%208.07839L12.3546%2018.587C12.1638%2018.8092%2011.8238%2018.8206%2011.6186%2018.6117L8.10643%2015.0366C7.81575%2014.7407%207.34084%2014.7345%207.04258%2015.0228V15.0228C6.74283%2015.3125%206.73444%2015.7903%207.02383%2016.0904L11.6195%2020.8555Z%22%20fill%3D%22%234cd964%22%2F%3E%3C%2Fsvg%3E");
 }
 .label-switch input[type="checkbox"]:checked + .checkbox {
   background: #446995;
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index 450682feb..ed009b11e 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -6064,23 +6064,43 @@ html.phone .document-menu .list-block .item-link {
 #user-list ul:before {
   content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner,
+.page-view-comments .list-block .item-inner,
+.container-edit-comment .list-block .item-inner,
+.container-add-reply .list-block .item-inner {
   display: block;
   padding: 16px 0;
   word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p,
+.page-view-comments p,
+.container-edit-comment p,
+.container-add-reply p {
   margin: 0;
+  word-break: break-word;
 }
-.page-comments .user-name {
-  font-size: 17px;
+.page-comments .user-name,
+.page-add-comment .user-name,
+.page-view-comments .user-name,
+.container-edit-comment .user-name,
+.container-add-reply .user-name {
+  font-size: 16px;
   line-height: 22px;
   color: #000000;
   margin: 0;
-  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-view-comments .comment-date,
+.container-edit-comment .comment-date,
+.container-add-reply .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date,
+.page-view-comments .reply-date,
+.container-edit-comment .reply-date,
+.container-add-reply .reply-date {
   font-size: 12px;
   line-height: 18px;
   color: #6d6d72;
@@ -6088,7 +6108,15 @@ html.phone .document-menu .list-block .item-link {
   margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-view-comments .comment-text,
+.container-edit-comment .comment-text,
+.container-add-reply .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text,
+.page-view-comments .reply-text,
+.container-edit-comment .reply-text,
+.container-add-reply .reply-text {
   color: #000000;
   font-size: 15px;
   line-height: 25px;
@@ -6096,38 +6124,284 @@ html.phone .document-menu .list-block .item-link {
   max-width: 100%;
   padding-right: 15px;
 }
-.page-comments .reply-item {
-  margin-top: 15px;
+.page-comments .reply-item,
+.page-add-comment .reply-item,
+.page-view-comments .reply-item,
+.container-edit-comment .reply-item,
+.container-add-reply .reply-item {
+  padding-right: 16px;
+  padding-top: 13px;
 }
-.page-comments .reply-item .user-name {
-  padding-top: 16px;
+.page-comments .reply-item .header-reply,
+.page-add-comment .reply-item .header-reply,
+.page-view-comments .reply-item .header-reply,
+.container-edit-comment .reply-item .header-reply,
+.container-add-reply .reply-item .header-reply {
+  display: flex;
+  justify-content: space-between;
 }
-.page-comments .reply-item:before {
-  content: '';
-  position: absolute;
-  left: auto;
-  bottom: 0;
-  right: auto;
-  top: 0;
-  height: 1px;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.12);
-  display: block;
-  z-index: 15;
-  -webkit-transform-origin: 50% 100%;
-  transform-origin: 50% 100%;
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name,
+.page-view-comments .reply-item .user-name,
+.container-edit-comment .reply-item .user-name,
+.container-add-reply .reply-item .user-name {
+  padding-top: 3px;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote,
+.page-view-comments .comment-quote,
+.container-edit-comment .comment-quote,
+.container-add-reply .comment-quote {
   color: #446995;
   border-left: 1px solid #446995;
   padding-left: 10px;
   margin: 5px 0;
   font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment,
+.page-view-comments .wrap-comment,
+.container-edit-comment .wrap-comment,
+.container-add-reply .wrap-comment {
+  padding: 16px 0 0 0;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea,
+.page-view-comments .comment-textarea,
+.container-edit-comment .comment-textarea,
+.container-add-reply .comment-textarea,
+.page-comments .reply-textarea,
+.page-add-comment .reply-textarea,
+.page-view-comments .reply-textarea,
+.container-edit-comment .reply-textarea,
+.container-add-reply .reply-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+  font-size: 15px;
+}
+.page-comments .header-comment,
+.page-add-comment .header-comment,
+.page-view-comments .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 16px;
+  margin-bottom: 13px;
+}
+.page-comments .header-comment .comment-right,
+.page-add-comment .header-comment .comment-right,
+.page-view-comments .header-comment .comment-right,
+.container-edit-comment .header-comment .comment-right,
+.container-add-reply .header-comment .comment-right {
+  display: flex;
+  justify-content: space-between;
+  width: 70px;
+}
+.page-comments .header-comment .comment-left,
+.page-add-comment .header-comment .comment-left,
+.page-view-comments .header-comment .comment-left,
+.container-edit-comment .header-comment .comment-left,
+.container-add-reply .header-comment .comment-left {
+  display: flex;
+  justify-content: space-between;
+}
+.page-comments .header-comment .initials-comment,
+.page-add-comment .header-comment .initials-comment,
+.page-view-comments .header-comment .initials-comment,
+.container-edit-comment .header-comment .initials-comment,
+.container-add-reply .header-comment .initials-comment {
+  height: 40px;
+  width: 40px;
+  border-radius: 50px;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 18px;
+}
+.page-comments .header-reply .reply-left,
+.page-add-comment .header-reply .reply-left,
+.page-view-comments .header-reply .reply-left,
+.container-edit-comment .header-reply .reply-left,
+.container-add-reply .header-reply .reply-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.page-comments .header-reply .initials-reply,
+.page-add-comment .header-reply .initials-reply,
+.page-view-comments .header-reply .initials-reply,
+.container-edit-comment .header-reply .initials-reply,
+.container-add-reply .header-reply .initials-reply {
+  width: 24px;
+  height: 24px;
+  color: #FFFFFF;
+  font-size: 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  border-radius: 50px;
+  margin-top: 5px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
   display: none;
 }
+.container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #446995;
+}
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 50%;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .page-view-comments {
+  background-color: #FFFFFF;
+}
+.container-view-comment .page-view-comments .list-block {
+  margin-bottom: 120px;
+}
+.container-view-comment .page-view-comments .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
+  content: none;
+}
+.container-view-comment .page-view-comments .list-block .item-inner {
+  padding: 0;
+}
+.container-view-comment .toolbar {
+  position: absolute;
+  background-color: #FFFFFF;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .toolbar.toolbar-bottom {
+  top: auto;
+}
+.container-view-comment .toolbar:before {
+  content: none;
+}
+.container-view-comment .toolbar a.link {
+  color: #446995;
+  font-size: 16px;
+}
+.container-view-comment .toolbar .toolbar-inner {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-left {
+  min-width: 80px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right {
+  min-width: 62px;
+  display: flex;
+  justify-content: space-between;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right a {
+  padding: 0 8px;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .list-block {
+  margin-top: 0;
+}
+.container-view-add-comment,
+.container-edit-comment,
+.container-add-reply,
+container-edit-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar,
+.container-edit-comment .navbar,
+.container-add-reply .navbar,
+container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #000;
+}
+.container-view-add-comment .navbar:after,
+.container-edit-comment .navbar:after,
+.container-add-reply .navbar:after,
+container-edit-comment .navbar:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #c4c4c4;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.container-view-add-comment .navbar .navbar-inner,
+.container-edit-comment .navbar .navbar-inner,
+.container-add-reply .navbar .navbar-inner,
+container-edit-comment .navbar .navbar-inner {
+  justify-content: space-between;
+}
+.container-view-add-comment .navbar a.link i + span,
+.container-edit-comment .navbar a.link i + span,
+.container-add-reply .navbar a.link i + span,
+container-edit-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .navbar .center,
+.container-edit-comment .navbar .center,
+.container-add-reply .navbar .center,
+container-edit-comment .navbar .center {
+  font-size: 18px;
+}
+.container-view-add-comment .navbar .right,
+.container-edit-comment .navbar .right,
+.container-add-reply .navbar .right,
+container-edit-comment .navbar .right {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment,
+.container-edit-comment .page-add-comment,
+.container-add-reply .page-add-comment,
+container-edit-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
+.container-view-add-comment .page-add-comment .page-content,
+.container-edit-comment .page-add-comment .page-content,
+.container-add-reply .page-add-comment .page-content,
+container-edit-comment .page-add-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment,
+container-edit-comment .header-comment {
+  justify-content: flex-start;
+}
+.actions-modal-button.color-red {
+  color: #f44336;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }
@@ -6564,6 +6838,41 @@ i.icon.icon-paste {
   height: 24px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%202H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10%208H23V23H10V8Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M5%200H14V5H5V0Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2012H12V11H21V12Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2016H12V15H21V16Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2020H12V19H21V20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-menu-comment {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.6047%2016.5848C17.0078%2016.1793%2017.4729%2015.9766%2018%2015.9766C18.5271%2015.9766%2018.9922%2016.1793%2019.3953%2016.5848C19.7984%2016.9903%2020%2017.4581%2020%2017.9883C20%2018.5185%2019.7984%2018.9864%2019.3953%2019.3918C18.9922%2019.7973%2018.5271%2020%2018%2020C17.4729%2020%2017.0078%2019.7973%2016.6047%2019.3918C16.2016%2018.9864%2016%2018.5185%2016%2017.9883C16%2017.4581%2016.2016%2016.9903%2016.6047%2016.5848ZM16.6047%2010.5965C17.0078%2010.191%2017.4729%209.9883%2018%209.9883C18.5271%209.9883%2018.9922%2010.191%2019.3953%2010.5965C19.7984%2011.0019%2020%2011.4698%2020%2012C20%2012.5302%2019.7984%2012.9981%2019.3953%2013.4035C18.9922%2013.809%2018.5271%2014.0117%2018%2014.0117C17.4729%2014.0117%2017.0078%2013.809%2016.6047%2013.4035C16.2016%2012.9981%2016%2012.5302%2016%2012C16%2011.4698%2016.2016%2011.0019%2016.6047%2010.5965ZM19.3953%207.4152C18.9922%207.82066%2018.5271%208.02339%2018%208.02339C17.4729%208.02339%2017.0078%207.82066%2016.6047%207.4152C16.2016%207.00975%2016%206.54191%2016%206.0117C16%205.48148%2016.2016%205.01365%2016.6047%204.60819C17.0078%204.20273%2017.4729%204%2018%204C18.5271%204%2018.9922%204.20273%2019.3953%204.60819C19.7984%205.01365%2020%205.48148%2020%206.0117C20%206.54191%2019.7984%207.00975%2019.3953%207.4152Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-resolve-comment {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-resolve-comment.check {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22%2340865C%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-arrow-comment.left {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.4219%207.40625L10.8281%2012L15.4219%2016.5938L14.0156%2018L8.01562%2012L14.0156%206L15.4219%207.40625Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-arrow-comment.right {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.98438%206L15.9844%2012L9.98438%2018L8.57812%2016.5938L13.1719%2012L8.57812%207.40625L9.98438%206Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-close-comment {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.9844%206.42188L13.4062%2012L18.9844%2017.5781L17.5781%2018.9844L12%2013.4062L6.42188%2018.9844L5.01562%2017.5781L10.5938%2012L5.01562%206.42188L6.42188%205.01562L12%2010.5938L17.5781%205.01562L18.9844%206.42188Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-done-comment {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.1719L19.5938%205.57812L21%206.98438L9%2018.9844L3.42188%2013.4062L4.82812%2012L9%2016.1719Z%22%20fill%3D%22%23446995%22%2F%3E%3C%2Fsvg%3E");
+}
 .navbar i.icon.icon-undo {
   width: 22px;
   height: 22px;
diff --git a/apps/documenteditor/mobile/resources/less/ios/_icons.less b/apps/documenteditor/mobile/resources/less/ios/_icons.less
index 1fb110579..754b73559 100644
--- a/apps/documenteditor/mobile/resources/less/ios/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less
@@ -491,6 +491,6 @@ i.icon {
   &.icon-resolve-comment.check {
     width: 30px;
     height: 30px;
-    .encoded-svg-background('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H30V30H0V0Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6195 20.8555C11.8237 21.0673 12.1658 21.0577 12.358 20.8349L22.516 9.05783C22.7843 8.74676 22.7528 8.27781 22.4453 8.00545V8.00545C22.1315 7.72756 21.651 7.7604 21.3779 8.07839L12.3546 18.587C12.1638 18.8092 11.8238 18.8206 11.6186 18.6117L8.10643 15.0366C7.81575 14.7407 7.34084 14.7345 7.04258 15.0228V15.0228C6.74283 15.3125 6.73444 15.7903 7.02383 16.0904L11.6195 20.8555Z" fill="#5B9F27"/></svg>');
+    .encoded-svg-background('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H30V30H0V0Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6195 20.8555C11.8237 21.0673 12.1658 21.0577 12.358 20.8349L22.516 9.05783C22.7843 8.74676 22.7528 8.27781 22.4453 8.00545V8.00545C22.1315 7.72756 21.651 7.7604 21.3779 8.07839L12.3546 18.587C12.1638 18.8092 11.8238 18.8206 11.6186 18.6117L8.10643 15.0366C7.81575 14.7407 7.34084 14.7345 7.04258 15.0228V15.0228C6.74283 15.3125 6.73444 15.7903 7.02383 16.0904L11.6195 20.8555Z" fill="@{green}"/></svg>');
   }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/material/_icons.less b/apps/documenteditor/mobile/resources/less/material/_icons.less
index 681503ddb..4b5473bd6 100644
--- a/apps/documenteditor/mobile/resources/less/material/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/material/_icons.less
@@ -404,6 +404,41 @@ i.icon {
     height: 24px;
     .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" fill="black"/><path d="M5 0H14V5H5V0Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" fill="black"/></svg>');
   }
+  &.icon-menu-comment {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6047 16.5848C17.0078 16.1793 17.4729 15.9766 18 15.9766C18.5271 15.9766 18.9922 16.1793 19.3953 16.5848C19.7984 16.9903 20 17.4581 20 17.9883C20 18.5185 19.7984 18.9864 19.3953 19.3918C18.9922 19.7973 18.5271 20 18 20C17.4729 20 17.0078 19.7973 16.6047 19.3918C16.2016 18.9864 16 18.5185 16 17.9883C16 17.4581 16.2016 16.9903 16.6047 16.5848ZM16.6047 10.5965C17.0078 10.191 17.4729 9.9883 18 9.9883C18.5271 9.9883 18.9922 10.191 19.3953 10.5965C19.7984 11.0019 20 11.4698 20 12C20 12.5302 19.7984 12.9981 19.3953 13.4035C18.9922 13.809 18.5271 14.0117 18 14.0117C17.4729 14.0117 17.0078 13.809 16.6047 13.4035C16.2016 12.9981 16 12.5302 16 12C16 11.4698 16.2016 11.0019 16.6047 10.5965ZM19.3953 7.4152C18.9922 7.82066 18.5271 8.02339 18 8.02339C17.4729 8.02339 17.0078 7.82066 16.6047 7.4152C16.2016 7.00975 16 6.54191 16 6.0117C16 5.48148 16.2016 5.01365 16.6047 4.60819C17.0078 4.20273 17.4729 4 18 4C18.5271 4 18.9922 4.20273 19.3953 4.60819C19.7984 5.01365 20 5.48148 20 6.0117C20 6.54191 19.7984 7.00975 19.3953 7.4152Z" fill="black" fill-opacity="0.6"/></svg>');
+  }
+  &.icon-resolve-comment {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="black" fill-opacity="0.6"/></svg>');
+  }
+  &.icon-resolve-comment.check {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
+  }
+  &.icon-arrow-comment.left {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.4219 7.40625L10.8281 12L15.4219 16.5938L14.0156 18L8.01562 12L14.0156 6L15.4219 7.40625Z" fill="@{themeColor}"/></svg>');
+  }
+  &.icon-arrow-comment.right {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.98438 6L15.9844 12L9.98438 18L8.57812 16.5938L13.1719 12L8.57812 7.40625L9.98438 6Z" fill="@{themeColor}"/></svg>');
+  }
+  &.icon-close-comment {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.9844 6.42188L13.4062 12L18.9844 17.5781L17.5781 18.9844L12 13.4062L6.42188 18.9844L5.01562 17.5781L10.5938 12L5.01562 6.42188L6.42188 5.01562L12 10.5938L17.5781 5.01562L18.9844 6.42188Z" fill="@{themeColor}"/></svg>');
+  }
+  &.icon-done-comment {
+    width: 24px;
+    height: 24px;
+    .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="@{themeColor}"/></svg>');
+  }
 }
 
 // Overwrite color for toolbar
diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css
index 3052c79ac..bbbc0b1be 100644
--- a/apps/presentationeditor/mobile/resources/css/app-ios.css
+++ b/apps/presentationeditor/mobile/resources/css/app-ios.css
@@ -6626,9 +6626,12 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-edit-comment .navbar {
   background-color: #FFFFFF;
 }
+.container-edit-comment .page {
+  background-color: #FFFFFF;
+}
 .container-view-comment {
   -webkit-transition: height 100ms;
-  transition: height 100ms;
+  transition: height 120ms;
   background-color: #FFFFFF;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -6721,6 +6724,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-add-reply .navbar a.link i + span {
   margin-left: 0;
 }
+.container-add-reply .page {
+  background-color: #FFFFFF;
+}
 .icon-arrow-comment {
   border: solid black;
   border-width: 0 2px 2px 0;
@@ -6738,6 +6744,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
 }
+.actions-modal-button.color-red {
+  color: #ff3b30;
+}
 .tablet .searchbar.document.replace .center .searchbar:first-child {
   margin-right: 10px;
 }
diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css
index 3855bdd11..df2107b28 100644
--- a/apps/presentationeditor/mobile/resources/css/app-material.css
+++ b/apps/presentationeditor/mobile/resources/css/app-material.css
@@ -6064,23 +6064,43 @@ html.phone .document-menu .list-block .item-link {
 #user-list ul:before {
   content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner,
+.page-view-comments .list-block .item-inner,
+.container-edit-comment .list-block .item-inner,
+.container-add-reply .list-block .item-inner {
   display: block;
   padding: 16px 0;
   word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p,
+.page-view-comments p,
+.container-edit-comment p,
+.container-add-reply p {
   margin: 0;
+  word-break: break-word;
 }
-.page-comments .user-name {
-  font-size: 17px;
+.page-comments .user-name,
+.page-add-comment .user-name,
+.page-view-comments .user-name,
+.container-edit-comment .user-name,
+.container-add-reply .user-name {
+  font-size: 16px;
   line-height: 22px;
   color: #000000;
   margin: 0;
-  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-view-comments .comment-date,
+.container-edit-comment .comment-date,
+.container-add-reply .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date,
+.page-view-comments .reply-date,
+.container-edit-comment .reply-date,
+.container-add-reply .reply-date {
   font-size: 12px;
   line-height: 18px;
   color: #6d6d72;
@@ -6088,7 +6108,15 @@ html.phone .document-menu .list-block .item-link {
   margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-view-comments .comment-text,
+.container-edit-comment .comment-text,
+.container-add-reply .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text,
+.page-view-comments .reply-text,
+.container-edit-comment .reply-text,
+.container-add-reply .reply-text {
   color: #000000;
   font-size: 15px;
   line-height: 25px;
@@ -6096,38 +6124,284 @@ html.phone .document-menu .list-block .item-link {
   max-width: 100%;
   padding-right: 15px;
 }
-.page-comments .reply-item {
-  margin-top: 15px;
+.page-comments .reply-item,
+.page-add-comment .reply-item,
+.page-view-comments .reply-item,
+.container-edit-comment .reply-item,
+.container-add-reply .reply-item {
+  padding-right: 16px;
+  padding-top: 13px;
 }
-.page-comments .reply-item .user-name {
-  padding-top: 16px;
+.page-comments .reply-item .header-reply,
+.page-add-comment .reply-item .header-reply,
+.page-view-comments .reply-item .header-reply,
+.container-edit-comment .reply-item .header-reply,
+.container-add-reply .reply-item .header-reply {
+  display: flex;
+  justify-content: space-between;
 }
-.page-comments .reply-item:before {
-  content: '';
-  position: absolute;
-  left: auto;
-  bottom: 0;
-  right: auto;
-  top: 0;
-  height: 1px;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.12);
-  display: block;
-  z-index: 15;
-  -webkit-transform-origin: 50% 100%;
-  transform-origin: 50% 100%;
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name,
+.page-view-comments .reply-item .user-name,
+.container-edit-comment .reply-item .user-name,
+.container-add-reply .reply-item .user-name {
+  padding-top: 3px;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote,
+.page-view-comments .comment-quote,
+.container-edit-comment .comment-quote,
+.container-add-reply .comment-quote {
   color: #aa5252;
   border-left: 1px solid #aa5252;
   padding-left: 10px;
   margin: 5px 0;
   font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment,
+.page-view-comments .wrap-comment,
+.container-edit-comment .wrap-comment,
+.container-add-reply .wrap-comment {
+  padding: 16px 0 0 0;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea,
+.page-view-comments .comment-textarea,
+.container-edit-comment .comment-textarea,
+.container-add-reply .comment-textarea,
+.page-comments .reply-textarea,
+.page-add-comment .reply-textarea,
+.page-view-comments .reply-textarea,
+.container-edit-comment .reply-textarea,
+.container-add-reply .reply-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+  font-size: 15px;
+}
+.page-comments .header-comment,
+.page-add-comment .header-comment,
+.page-view-comments .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 16px;
+  margin-bottom: 13px;
+}
+.page-comments .header-comment .comment-right,
+.page-add-comment .header-comment .comment-right,
+.page-view-comments .header-comment .comment-right,
+.container-edit-comment .header-comment .comment-right,
+.container-add-reply .header-comment .comment-right {
+  display: flex;
+  justify-content: space-between;
+  width: 70px;
+}
+.page-comments .header-comment .comment-left,
+.page-add-comment .header-comment .comment-left,
+.page-view-comments .header-comment .comment-left,
+.container-edit-comment .header-comment .comment-left,
+.container-add-reply .header-comment .comment-left {
+  display: flex;
+  justify-content: space-between;
+}
+.page-comments .header-comment .initials-comment,
+.page-add-comment .header-comment .initials-comment,
+.page-view-comments .header-comment .initials-comment,
+.container-edit-comment .header-comment .initials-comment,
+.container-add-reply .header-comment .initials-comment {
+  height: 40px;
+  width: 40px;
+  border-radius: 50px;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 18px;
+}
+.page-comments .header-reply .reply-left,
+.page-add-comment .header-reply .reply-left,
+.page-view-comments .header-reply .reply-left,
+.container-edit-comment .header-reply .reply-left,
+.container-add-reply .header-reply .reply-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.page-comments .header-reply .initials-reply,
+.page-add-comment .header-reply .initials-reply,
+.page-view-comments .header-reply .initials-reply,
+.container-edit-comment .header-reply .initials-reply,
+.container-add-reply .header-reply .initials-reply {
+  width: 24px;
+  height: 24px;
+  color: #FFFFFF;
+  font-size: 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  border-radius: 50px;
+  margin-top: 5px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
   display: none;
 }
+.container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #aa5252;
+}
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 50%;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .page-view-comments {
+  background-color: #FFFFFF;
+}
+.container-view-comment .page-view-comments .list-block {
+  margin-bottom: 120px;
+}
+.container-view-comment .page-view-comments .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
+  content: none;
+}
+.container-view-comment .page-view-comments .list-block .item-inner {
+  padding: 0;
+}
+.container-view-comment .toolbar {
+  position: absolute;
+  background-color: #FFFFFF;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .toolbar.toolbar-bottom {
+  top: auto;
+}
+.container-view-comment .toolbar:before {
+  content: none;
+}
+.container-view-comment .toolbar a.link {
+  color: #aa5252;
+  font-size: 16px;
+}
+.container-view-comment .toolbar .toolbar-inner {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-left {
+  min-width: 80px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right {
+  min-width: 62px;
+  display: flex;
+  justify-content: space-between;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right a {
+  padding: 0 8px;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .list-block {
+  margin-top: 0;
+}
+.container-view-add-comment,
+.container-edit-comment,
+.container-add-reply,
+container-edit-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar,
+.container-edit-comment .navbar,
+.container-add-reply .navbar,
+container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #000;
+}
+.container-view-add-comment .navbar:after,
+.container-edit-comment .navbar:after,
+.container-add-reply .navbar:after,
+container-edit-comment .navbar:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #c4c4c4;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.container-view-add-comment .navbar .navbar-inner,
+.container-edit-comment .navbar .navbar-inner,
+.container-add-reply .navbar .navbar-inner,
+container-edit-comment .navbar .navbar-inner {
+  justify-content: space-between;
+}
+.container-view-add-comment .navbar a.link i + span,
+.container-edit-comment .navbar a.link i + span,
+.container-add-reply .navbar a.link i + span,
+container-edit-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .navbar .center,
+.container-edit-comment .navbar .center,
+.container-add-reply .navbar .center,
+container-edit-comment .navbar .center {
+  font-size: 18px;
+}
+.container-view-add-comment .navbar .right,
+.container-edit-comment .navbar .right,
+.container-add-reply .navbar .right,
+container-edit-comment .navbar .right {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment,
+.container-edit-comment .page-add-comment,
+.container-add-reply .page-add-comment,
+container-edit-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
+.container-view-add-comment .page-add-comment .page-content,
+.container-edit-comment .page-add-comment .page-content,
+.container-add-reply .page-add-comment .page-content,
+container-edit-comment .page-add-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment,
+container-edit-comment .header-comment {
+  justify-content: flex-start;
+}
+.actions-modal-button.color-red {
+  color: #f44336;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
index 6d965e8e9..0c2270a0d 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@@ -6626,9 +6626,12 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-edit-comment .navbar {
   background-color: #FFFFFF;
 }
+.container-edit-comment .page {
+  background-color: #FFFFFF;
+}
 .container-view-comment {
   -webkit-transition: height 100ms;
-  transition: height 100ms;
+  transition: height 120ms;
   background-color: #FFFFFF;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -6721,6 +6724,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .container-add-reply .navbar a.link i + span {
   margin-left: 0;
 }
+.container-add-reply .page {
+  background-color: #FFFFFF;
+}
 .icon-arrow-comment {
   border: solid black;
   border-width: 0 2px 2px 0;
@@ -6738,6 +6744,9 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
 }
+.actions-modal-button.color-red {
+  color: #ff3b30;
+}
 i.icon.icon-search {
   width: 24px;
   height: 24px;
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
index db3b6425d..887889736 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
@@ -6074,23 +6074,43 @@ html.phone .document-menu .list-block .item-link {
 #user-list ul:before {
   content: none;
 }
-.page-comments .list-block .item-inner {
+.page-comments .list-block .item-inner,
+.page-add-comment .list-block .item-inner,
+.page-view-comments .list-block .item-inner,
+.container-edit-comment .list-block .item-inner,
+.container-add-reply .list-block .item-inner {
   display: block;
   padding: 16px 0;
   word-wrap: break-word;
 }
-.page-comments p {
+.page-comments p,
+.page-add-comment p,
+.page-view-comments p,
+.container-edit-comment p,
+.container-add-reply p {
   margin: 0;
+  word-break: break-word;
 }
-.page-comments .user-name {
-  font-size: 17px;
+.page-comments .user-name,
+.page-add-comment .user-name,
+.page-view-comments .user-name,
+.container-edit-comment .user-name,
+.container-add-reply .user-name {
+  font-size: 16px;
   line-height: 22px;
   color: #000000;
   margin: 0;
-  font-weight: bold;
 }
 .page-comments .comment-date,
-.page-comments .reply-date {
+.page-add-comment .comment-date,
+.page-view-comments .comment-date,
+.container-edit-comment .comment-date,
+.container-add-reply .comment-date,
+.page-comments .reply-date,
+.page-add-comment .reply-date,
+.page-view-comments .reply-date,
+.container-edit-comment .reply-date,
+.container-add-reply .reply-date {
   font-size: 12px;
   line-height: 18px;
   color: #6d6d72;
@@ -6098,7 +6118,15 @@ html.phone .document-menu .list-block .item-link {
   margin-top: 0px;
 }
 .page-comments .comment-text,
-.page-comments .reply-text {
+.page-add-comment .comment-text,
+.page-view-comments .comment-text,
+.container-edit-comment .comment-text,
+.container-add-reply .comment-text,
+.page-comments .reply-text,
+.page-add-comment .reply-text,
+.page-view-comments .reply-text,
+.container-edit-comment .reply-text,
+.container-add-reply .reply-text {
   color: #000000;
   font-size: 15px;
   line-height: 25px;
@@ -6106,38 +6134,284 @@ html.phone .document-menu .list-block .item-link {
   max-width: 100%;
   padding-right: 15px;
 }
-.page-comments .reply-item {
-  margin-top: 15px;
+.page-comments .reply-item,
+.page-add-comment .reply-item,
+.page-view-comments .reply-item,
+.container-edit-comment .reply-item,
+.container-add-reply .reply-item {
+  padding-right: 16px;
+  padding-top: 13px;
 }
-.page-comments .reply-item .user-name {
-  padding-top: 16px;
+.page-comments .reply-item .header-reply,
+.page-add-comment .reply-item .header-reply,
+.page-view-comments .reply-item .header-reply,
+.container-edit-comment .reply-item .header-reply,
+.container-add-reply .reply-item .header-reply {
+  display: flex;
+  justify-content: space-between;
 }
-.page-comments .reply-item:before {
-  content: '';
-  position: absolute;
-  left: auto;
-  bottom: 0;
-  right: auto;
-  top: 0;
-  height: 1px;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.12);
-  display: block;
-  z-index: 15;
-  -webkit-transform-origin: 50% 100%;
-  transform-origin: 50% 100%;
+.page-comments .reply-item .user-name,
+.page-add-comment .reply-item .user-name,
+.page-view-comments .reply-item .user-name,
+.container-edit-comment .reply-item .user-name,
+.container-add-reply .reply-item .user-name {
+  padding-top: 3px;
 }
-.page-comments .comment-quote {
+.page-comments .comment-quote,
+.page-add-comment .comment-quote,
+.page-view-comments .comment-quote,
+.container-edit-comment .comment-quote,
+.container-add-reply .comment-quote {
   color: #40865c;
   border-left: 1px solid #40865c;
   padding-left: 10px;
   margin: 5px 0;
   font-size: 15px;
 }
+.page-comments .wrap-comment,
+.page-add-comment .wrap-comment,
+.page-view-comments .wrap-comment,
+.container-edit-comment .wrap-comment,
+.container-add-reply .wrap-comment {
+  padding: 16px 0 0 0;
+}
+.page-comments .comment-textarea,
+.page-add-comment .comment-textarea,
+.page-view-comments .comment-textarea,
+.container-edit-comment .comment-textarea,
+.container-add-reply .comment-textarea,
+.page-comments .reply-textarea,
+.page-add-comment .reply-textarea,
+.page-view-comments .reply-textarea,
+.container-edit-comment .reply-textarea,
+.container-add-reply .reply-textarea {
+  margin-top: 10px;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  min-height: 200px;
+  font-size: 15px;
+}
+.page-comments .header-comment,
+.page-add-comment .header-comment,
+.page-view-comments .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 16px;
+  margin-bottom: 13px;
+}
+.page-comments .header-comment .comment-right,
+.page-add-comment .header-comment .comment-right,
+.page-view-comments .header-comment .comment-right,
+.container-edit-comment .header-comment .comment-right,
+.container-add-reply .header-comment .comment-right {
+  display: flex;
+  justify-content: space-between;
+  width: 70px;
+}
+.page-comments .header-comment .comment-left,
+.page-add-comment .header-comment .comment-left,
+.page-view-comments .header-comment .comment-left,
+.container-edit-comment .header-comment .comment-left,
+.container-add-reply .header-comment .comment-left {
+  display: flex;
+  justify-content: space-between;
+}
+.page-comments .header-comment .initials-comment,
+.page-add-comment .header-comment .initials-comment,
+.page-view-comments .header-comment .initials-comment,
+.container-edit-comment .header-comment .initials-comment,
+.container-add-reply .header-comment .initials-comment {
+  height: 40px;
+  width: 40px;
+  border-radius: 50px;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 18px;
+}
+.page-comments .header-reply .reply-left,
+.page-add-comment .header-reply .reply-left,
+.page-view-comments .header-reply .reply-left,
+.container-edit-comment .header-reply .reply-left,
+.container-add-reply .header-reply .reply-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.page-comments .header-reply .initials-reply,
+.page-add-comment .header-reply .initials-reply,
+.page-view-comments .header-reply .initials-reply,
+.container-edit-comment .header-reply .initials-reply,
+.container-add-reply .header-reply .initials-reply {
+  width: 24px;
+  height: 24px;
+  color: #FFFFFF;
+  font-size: 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+  border-radius: 50px;
+  margin-top: 5px;
+}
 .settings.popup .list-block ul.list-reply:last-child:after,
 .settings.popover .list-block ul.list-reply:last-child:after {
   display: none;
 }
+.container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #40865c;
+}
+.container-view-comment {
+  -webkit-transition: height 100ms;
+  transition: height 100ms;
+  background-color: #FFFFFF;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 50%;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .page-view-comments {
+  background-color: #FFFFFF;
+}
+.container-view-comment .page-view-comments .list-block {
+  margin-bottom: 120px;
+}
+.container-view-comment .page-view-comments .list-block ul:before,
+.container-view-comment .page-view-comments .list-block ul:after {
+  content: none;
+}
+.container-view-comment .page-view-comments .list-block .item-inner {
+  padding: 0;
+}
+.container-view-comment .toolbar {
+  position: absolute;
+  background-color: #FFFFFF;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+}
+.container-view-comment .toolbar.toolbar-bottom {
+  top: auto;
+}
+.container-view-comment .toolbar:before {
+  content: none;
+}
+.container-view-comment .toolbar a.link {
+  color: #40865c;
+  font-size: 16px;
+}
+.container-view-comment .toolbar .toolbar-inner {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-left {
+  min-width: 80px;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right {
+  min-width: 62px;
+  display: flex;
+  justify-content: space-between;
+}
+.container-view-comment .toolbar .toolbar-inner .button-right a {
+  padding: 0 8px;
+}
+.container-view-comment .swipe-container {
+  display: flex;
+  justify-content: center;
+  height: 40px;
+}
+.container-view-comment .swipe-container .icon-swipe {
+  margin-top: 8px;
+  width: 40px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.container-view-comment .list-block {
+  margin-top: 0;
+}
+.container-view-add-comment,
+.container-edit-comment,
+.container-add-reply,
+container-edit-comment {
+  height: 100%;
+}
+.container-view-add-comment .navbar,
+.container-edit-comment .navbar,
+.container-add-reply .navbar,
+container-edit-comment .navbar {
+  background-color: #FFFFFF;
+  color: #000;
+}
+.container-view-add-comment .navbar:after,
+.container-edit-comment .navbar:after,
+.container-add-reply .navbar:after,
+container-edit-comment .navbar:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #c4c4c4;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.container-view-add-comment .navbar .navbar-inner,
+.container-edit-comment .navbar .navbar-inner,
+.container-add-reply .navbar .navbar-inner,
+container-edit-comment .navbar .navbar-inner {
+  justify-content: space-between;
+}
+.container-view-add-comment .navbar a.link i + span,
+.container-edit-comment .navbar a.link i + span,
+.container-add-reply .navbar a.link i + span,
+container-edit-comment .navbar a.link i + span {
+  margin-left: 0;
+}
+.container-view-add-comment .navbar .center,
+.container-edit-comment .navbar .center,
+.container-add-reply .navbar .center,
+container-edit-comment .navbar .center {
+  font-size: 18px;
+}
+.container-view-add-comment .navbar .right,
+.container-edit-comment .navbar .right,
+.container-add-reply .navbar .right,
+container-edit-comment .navbar .right {
+  margin-left: 0;
+}
+.container-view-add-comment .page-add-comment,
+.container-edit-comment .page-add-comment,
+.container-add-reply .page-add-comment,
+container-edit-comment .page-add-comment {
+  background-color: #FFFFFF;
+}
+.container-view-add-comment .page-add-comment .page-content,
+.container-edit-comment .page-add-comment .page-content,
+.container-add-reply .page-add-comment .page-content,
+container-edit-comment .page-add-comment .page-content {
+  padding: 0 16px 80px;
+}
+.container-view-add-comment .header-comment,
+.container-edit-comment .header-comment,
+.container-add-reply .header-comment,
+container-edit-comment .header-comment {
+  justify-content: flex-start;
+}
+.actions-modal-button.color-red {
+  color: #f44336;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }