diff --git a/apps/common/mobile/lib/controller/Collaboration.js b/apps/common/mobile/lib/controller/Collaboration.js
index 39afe7302..af364fbdd 100644
--- a/apps/common/mobile/lib/controller/Collaboration.js
+++ b/apps/common/mobile/lib/controller/Collaboration.js
@@ -685,6 +685,32 @@ define([
             },
 
             //Comments
+            getCurrentUser: function () {
+                var me = this;
+                _.each(editUsers, function(item){
+                    if (item.asc_getIdOriginal() === _userId) {
+                        me.currentUser = item;
+                    }
+                });
+                return me.currentUser;
+            },
+
+            getCommentInfo: function () {
+                this.getCurrentUser();
+                if (this.currentUser) {
+                    var date = new Date();
+                    var comment = {
+                        time: date.getTime(),
+                        date: this.dateToLocaleTimeString(date),
+                        userid: _userId,
+                        username: this.currentUser.asc_getUserName(),
+                        usercolor: this.currentUser.asc_getColor(),
+                        userInitials: this.getInitials(this.currentUser.asc_getUserName())
+                    };
+                    return comment;
+                }
+            },
+
             getInitials: function(name) {
                 var fio = name.split(' ');
                 var initials = fio[0].substring(0, 1).toUpperCase();
@@ -1014,11 +1040,7 @@ define([
                             addReply.asc_putText(replyVal);
                             addReply.asc_putTime(me.utcDateToString(new Date()));
                             addReply.asc_putOnlyOfficeTime(me.ooDateToString(new Date()));
-                            _.each(editUsers, function(item){
-                                if (item.asc_getIdOriginal() === _userId) {
-                                    me.currentUser = item;
-                                }
-                            });
+                            me.getCurrentUser();
                             addReply.asc_putUserId(_userId);
                             addReply.asc_putUserName(me.currentUser.asc_getUserName());
 
@@ -1030,104 +1052,7 @@ define([
                 }
             },
 
-            showAddCommentModal: function() {
-                var me = this,
-                    isAndroid = Framework7.prototype.device.android === true,
-                    modalView,
-                    appPrefix = !!window.DE ? DE : !!window.PE ? PE : SSE,
-                    mainView = appPrefix.getController('Editor').getView('Editor').f7View;
-
-                uiApp.closeModal();
-
-                var date = new Date();
-                _.each(editUsers, function(item){
-                    if (item.asc_getIdOriginal() === _userId) {
-                        me.currentUser = item;
-                    }
-                });
-                if (!me.currentUser) return;
-                var comment = {
-                    time: date.getTime(),
-                    date: me.dateToLocaleTimeString(date),
-                    userid: _userId,
-                    username: me.currentUser.asc_getUserName(),
-                    usercolor: me.currentUser.asc_getColor(),
-                    userInitials: me.getInitials(me.currentUser.asc_getUserName())
-                };
-
-                if (Common.SharedSettings.get('phone')) {
-                    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-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-comment"></i>' + (!isAndroid ? '<span>' + me.textDone + '</span>' : '') + '</a></div>' +
-                                '</div>' +
-                            '</div>' +
-                            '<div class="pages">' +
-                                '<div class="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" autofocus></textarea></div>' +
-                                        '</div>' +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>' +
-                        '</div>'
-                    )).on('opened', function () {
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function (e) {
-                        mainView.showNavbar();
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
-                    });
-                    mainView.hideNavbar();
-                } else {
-                    modalView = uiApp.popover(
-                        '<div class="popover add-comment">' +
-                            '<div class="popover-inner">' +
-                                '<div class="toolbar toolbar-bottom" style="bottom: 0;">' +
-                                    '<div class="toolbar-inner">' +
-                                        '<div class="button-left">' +
-                                            '<a href="#" class="link close-popover">' + me.textCancel + '</a>' +
-                                        '</div>' +
-                                    '<div class="button-right">' +
-                                        '<a href="#" class="link add-done" id="add-comment">' + me.textAddComment + '</a>' +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>' +
-                            '<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 oo_editor_input="true" id="comment-text" class="comment-textarea" autofocus></textarea></div>' +
-                            '</div>' +
-                            '</div>' +
-                        '</div>',
-                        $$('#toolbar-collaboration')
-                    );
-                }
-
-                appPrefix.getController('Toolbar').getView('Toolbar').hideSearch();
-
-                $('#add-comment').single('click', _.bind(me.onAddNewComment, me));
-
-                _.defer(function(){
-                    $('#comment-text').focus();
-                });
-            },
-
-            onAddNewComment: function() {
+            onAddNewComment: function(value) {
                 var comment;
                 if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
                     comment = new Asc.asc_CCommentDataWord(null);
@@ -1135,7 +1060,7 @@ define([
                     comment = new Asc.asc_CCommentData(null);
                 }
 
-                var textComment = $('#comment-text').val();
+                var textComment = value;
 
                 if (textComment.length > 0) {
                     comment.asc_putText(textComment);
diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less
index 9ac262f3b..5afebdaaa 100644
--- a/apps/common/mobile/resources/less/ios/_collaboration.less
+++ b/apps/common/mobile/resources/less/ios/_collaboration.less
@@ -102,6 +102,9 @@
     margin: 0;
     word-break: break-word;
   }
+  .list-reply {
+    padding-left: 32px;
+  }
   .user-name {
     font-size: 17px;
     line-height: 22px;
@@ -328,54 +331,36 @@
   }
 }
 
-.container-view-add-comment {
-  height: 100%;
-  .navbar {
-    background-color: #FFFFFF;
-    a.link i + span {
-      margin-left: 0;
+#done-comment {
+  color: @themeColor;
+}
+.page-add-comment {
+  background-color: #FFFFFF;
+  .wrap-comment {
+    padding: 16px 16px 0 16px;
+    .header-comment {
+      justify-content: flex-start;
     }
-  }
-  .page {
-    background-color: #FFFFFF;
-    .page-content {
-      padding: 0 16px 80px;
+    .user-name {
+      font-weight: bold;
+    }
+    .comment-date {
+      font-size: 12px;
+      color: #6d6d72;
+    }
+    .wrap-textarea {
+      margin-top: 16px;
+      padding-right: 6px;
+      .comment-textarea {
+        border: 1px solid #c4c4c4;
+        margin-top: 0;
+        min-height: 100px;
+        border-radius: 4px;
+        width: 100%;
+      }
     }
   }
 }
-.popover {
-  &.add-comment {
-    .toolbar-bottom {
-      position: absolute;
-      bottom: 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);
-      border-radius: 0 0 13px 13px;
-      &:before {
-        content: none;
-      }
-      .toolbar-inner {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 16px;
-      }
-    }
-    .wrap-comment {
-      padding-bottom: 80px;
-    }
-    .comment-textarea {
-      border: 1px solid #c4c4c4;
-      border-radius: 5px;
-      min-height: 80px;
-      max-height: 300px;
-      width: 280px;
-    }
-  }
-}
-
 .container-add-reply {
   height: 100%;
   .navbar {
diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less
index 7760211d6..18f1c2cc0 100644
--- a/apps/common/mobile/resources/less/material/_collaboration.less
+++ b/apps/common/mobile/resources/less/material/_collaboration.less
@@ -100,6 +100,9 @@
     margin: 0;
     word-break: break-word;
   }
+  .list-reply {
+    padding-left: 32px;
+  }
   .user-name {
     font-size: 16px;
     line-height: 22px;
@@ -282,7 +285,35 @@
   }
 }
 
-.container-view-add-comment, .container-edit-comment, .container-add-reply, container-edit-comment {
+#done-comment {
+  padding: 0 16px;
+}
+.page-add-comment {
+  .wrap-comment {
+    padding: 16px 16px 0 16px;
+    .header-comment {
+      justify-content: flex-start;
+    }
+    .user-name {
+      font-weight: bold;
+    }
+    .comment-date {
+      font-size: 12px;
+      color: #6d6d72;
+    }
+    .wrap-textarea {
+      padding-right: 6px;
+      .comment-textarea {
+        border: 1px solid #c4c4c4;
+        margin-top: 0;
+        min-height: 100px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+.container-edit-comment, .container-add-reply, container-edit-comment {
   height: 100%;
   .navbar {
     background-color: #FFFFFF;
diff --git a/apps/documenteditor/mobile/app/controller/DocumentHolder.js b/apps/documenteditor/mobile/app/controller/DocumentHolder.js
index 532a74301..d82fec29f 100644
--- a/apps/documenteditor/mobile/app/controller/DocumentHolder.js
+++ b/apps/documenteditor/mobile/app/controller/DocumentHolder.js
@@ -164,11 +164,9 @@ define([
                     var getCollaboration = DE.getController('Common.Controllers.Collaboration');
                     getCollaboration.showCommentModal();
                 } else if ('addcomment' == eventName) {
-                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
-                    /*if (this.api && this.mode.canCoAuthoring && this.mode.canComments) {
-
-                    }*/
-                    getCollaboration.showAddCommentModal();
+                    _view.hideMenu();
+                    DE.getController('AddContainer').showModal();
+                    DE.getController('AddOther').getView('AddOther').showPageComment(false);
                 } else if ('showActionSheet' == eventName && _actionSheets.length > 0) {
                     _.delay(function () {
                         _.each(_actionSheets, function (action) {
diff --git a/apps/documenteditor/mobile/app/controller/add/AddOther.js b/apps/documenteditor/mobile/app/controller/add/AddOther.js
index 8b14782a0..09a3681e1 100644
--- a/apps/documenteditor/mobile/app/controller/add/AddOther.js
+++ b/apps/documenteditor/mobile/app/controller/add/AddOther.js
@@ -111,10 +111,27 @@ define([
                     }
                 } else if (pageId == '#addother-insert-footnote') {
                     me.initInsertFootnote();
+                } else if (pageId === "#addother-insert-comment") {
+                    me.initInsertComment();
                 }
             },
 
             // Handlers
+            initInsertComment: function () {
+                var comment = DE.getController('Common.Controllers.Collaboration').getCommentInfo();
+                if (comment) {
+                    this.getView('AddOther').renderComment(comment);
+                    $('#done-comment').single('click', _.bind(this.onDoneComment, this));
+                }
+            },
+
+            onDoneComment: function() {
+                var value = $('#comment-text').val();
+                if (value.length > 0) {
+                    DE.getController('Common.Controllers.Collaboration').onAddNewComment(value);
+                    DE.getController('AddContainer').hideModal();
+                }
+            },
 
             initInsertFootnote: function () {
                 var me = this,
diff --git a/apps/documenteditor/mobile/app/template/AddOther.template b/apps/documenteditor/mobile/app/template/AddOther.template
index 76c91c506..d4b9d19f6 100644
--- a/apps/documenteditor/mobile/app/template/AddOther.template
+++ b/apps/documenteditor/mobile/app/template/AddOther.template
@@ -74,6 +74,18 @@
                     </div>
                 </a>
             </li>
+            <li>
+                <a id="add-other-comment" class="item-link">
+                    <div class="item-content">
+                         <div class="item-media">
+                             <i class="icon icon-insert-comment"></i>
+                         </div>
+                         <div class="item-inner">
+                             <div class="item-title"><%= scope.textComment %></div>
+                         </div>
+                    </div>
+                </a>
+            </li>
         </ul>
     </div>
 </div>
@@ -324,4 +336,22 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Page Insert Comment view -->
+<div id="addother-insert-comment">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textAddComment %></div>
+            <div class="right sliding"><a id="done-comment"><% if (android) { %><i class="icon icon-done-comment"></i><% } else { %><%= scope.textDone %><% } %></a></div>
+        </div>
+    </div>
+    <div class="page page-add-comment" data-page="addother-insert-comment">
+        <div class="page-content">
+            <div id="comment-info" class="wrap-comment">
+            </div>
+
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/add/AddOther.js b/apps/documenteditor/mobile/app/view/add/AddOther.js
index c5c1afd41..76bfaeb07 100644
--- a/apps/documenteditor/mobile/app/view/add/AddOther.js
+++ b/apps/documenteditor/mobile/app/view/add/AddOther.js
@@ -70,6 +70,7 @@ define([
                 $('#add-other-link').single('click',        _.bind(me.showLink, me));
                 $('#add-other-pagenumber').single('click',  _.bind(me.showPagePosition, me));
                 $('#add-other-footnote').single('click',    _.bind(me.showPageFootnote, me));
+                $('#add-other-comment').single('click',     _.bind(me.showPageComment, me));
 
                 me.initControls();
             },
@@ -143,6 +144,26 @@ define([
                 this.showPage('#addother-insert-footnote');
             },
 
+            showPageComment: function(animate) {
+                this.showPage('#addother-insert-comment', animate);
+            },
+
+            renderComment: function(comment) {
+                var $commentInfo = $('#comment-info');
+                var template = [
+                    '<% if (android) { %><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>',
+                    '<% if (android) { %></div></div><% } %>',
+                    '<div class="wrap-textarea"><textarea id="comment-text" class="comment-textarea" autofocus></textarea></div>'
+                ].join('');
+                var insert = _.template(template)({
+                    android: Framework7.prototype.device.android,
+                    comment: comment
+                });
+                $commentInfo.html(insert);
+            },
+
             renderNumFormat: function (dataFormat, selectFormat) {
                 var $listFormat = $('#list-format-footnote ul'),
                     items = [];
@@ -221,8 +242,10 @@ define([
             textInsertFootnote: 'Insert Footnote',
             textFormat: 'Format',
             textStartFrom: 'Start At',
-            textLocation: 'Location'
-        
+            textLocation: 'Location',
+            textComment: 'Comment',
+            textAddComment: 'Add Comment',
+            textDone: 'Done'
         
         }
     })(), DE.Views.AddOther || {}))
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index fbf79fe47..7bd3329a2 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply,
+.view-comment .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .add-comment .user-name,
 .page-view-comments .user-name,
@@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   min-height: 80px;
   height: 80px;
 }
-.container-view-add-comment {
-  height: 100%;
+#done-comment {
+  color: #446995;
 }
-.container-view-add-comment .navbar {
+.page-add-comment {
   background-color: #FFFFFF;
 }
-.container-view-add-comment .navbar a.link i + span {
-  margin-left: 0;
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
 }
-.container-view-add-comment .page {
-  background-color: #FFFFFF;
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
 }
-.container-view-add-comment .page .page-content {
-  padding: 0 16px 80px;
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
 }
-.popover.add-comment .toolbar-bottom {
-  position: absolute;
-  bottom: 0;
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
 }
-.popover.add-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);
-  border-radius: 0 0 13px 13px;
+.page-add-comment .wrap-comment .wrap-textarea {
+  margin-top: 16px;
+  padding-right: 6px;
 }
-.popover.add-comment .toolbar:before {
-  content: none;
-}
-.popover.add-comment .toolbar .toolbar-inner {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-}
-.popover.add-comment .wrap-comment {
-  padding-bottom: 80px;
-}
-.popover.add-comment .comment-textarea {
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
   border: 1px solid #c4c4c4;
-  border-radius: 5px;
-  min-height: 80px;
-  max-height: 300px;
-  width: 280px;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+  width: 100%;
 }
 .container-add-reply {
   height: 100%;
@@ -7399,6 +7394,11 @@ i.icon.icon-resolve-comment.check {
   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%234cd964%22%2F%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-insert-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%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.1538%209.00708H11.8462C10.8266%209.00708%2010%209.83461%2010%2010.8554V15.1694C10%2016.1902%2010.8266%2017.0177%2011.8462%2017.0177H13.8329C13.9409%2017.0177%2014.0454%2017.0556%2014.1284%2017.1248L18.243%2020.392C18.5436%2020.6428%2019%2020.4288%2019%2020.037V17.4798C19%2017.2246%2019.2066%2017.0177%2019.4615%2017.0177H20.1538C21.1734%2017.0177%2022%2016.1902%2022%2015.1694V10.8554C22%209.83461%2021.1734%209.00708%2020.1538%209.00708ZM20%2010.0083C20.5523%2010.0083%2021%2010.4565%2021%2011.0095V15.0154C21%2015.5683%2020.5523%2016.0165%2020%2016.0165H18.0025L18%2018.8995C18%2019.2912%2018%2019%2018%2019L14.5%2016.0165H12C11.4477%2016.0165%2011%2015.5683%2011%2015.0154V11.0095C11%2010.4565%2011.4477%2010.0083%2012%2010.0083H20Z%22%20fill%3D%22%23446995%22%2F%3E%3Cpath%20d%3D%22M14.5%203H4.5C3.18908%203%202%204.2153%202%205.50295V12.0346C2%2013.3222%203.18908%2014.013%204.5%2014.013H5.5C5.82773%2014.013%206%2014.1917%206%2014.5136V17.5183C6%2018.0125%206.6135%2018.3352%207%2018.0189L11%2014.9858V13.5L7%2016.5V13.0118H4.5C3.78992%2013.0118%203%2012.732%203%2012.0346V5.50295C3%204.80547%203.78992%204.00118%204.5%204.00118H14.5C15.2101%204.00118%2016%204.80547%2016%205.50295V8.0059H17V5.50295C17%204.2153%2015.8109%203%2014.5%203Z%22%20fill%3D%22%23446995%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 6d5966cac..2d06856ad 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -6081,6 +6081,13 @@ html.phone .document-menu .list-block .item-link {
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.page-add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .page-add-comment .user-name,
 .page-view-comments .user-name,
@@ -6326,20 +6333,42 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment .list-block {
   margin-top: 0;
 }
-.container-view-add-comment,
+#done-comment {
+  padding: 0 16px;
+}
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
+}
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
+}
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
+}
+.page-add-comment .wrap-comment .wrap-textarea {
+  padding-right: 6px;
+}
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
+  border: 1px solid #c4c4c4;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+}
 .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 {
@@ -6357,43 +6386,36 @@ container-edit-comment .navbar:after {
   -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 {
@@ -6873,6 +6895,16 @@ i.icon.icon-done-comment {
   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");
 }
+i.icon.icon-insert-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%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.1538%209.00708H11.8462C10.8266%209.00708%2010%209.83461%2010%2010.8554V15.1694C10%2016.1902%2010.8266%2017.0177%2011.8462%2017.0177H13.8329C13.9409%2017.0177%2014.0454%2017.0556%2014.1284%2017.1248L18.243%2020.392C18.5436%2020.6428%2019%2020.4288%2019%2020.037V17.4798C19%2017.2246%2019.2066%2017.0177%2019.4615%2017.0177H20.1538C21.1734%2017.0177%2022%2016.1902%2022%2015.1694V10.8554C22%209.83461%2021.1734%209.00708%2020.1538%209.00708ZM20%2010.0083C20.5523%2010.0083%2021%2010.4565%2021%2011.0095V15.0154C21%2015.5683%2020.5523%2016.0165%2020%2016.0165H18.0025L18%2018.8995C18%2019.2912%2018%2019%2018%2019L14.5%2016.0165H12C11.4477%2016.0165%2011%2015.5683%2011%2015.0154V11.0095C11%2010.4565%2011.4477%2010.0083%2012%2010.0083H20Z%22%20fill%3D%22%23446995%22%2F%3E%3Cpath%20d%3D%22M14.5%203H4.5C3.18908%203%202%204.2153%202%205.50295V12.0346C2%2013.3222%203.18908%2014.013%204.5%2014.013H5.5C5.82773%2014.013%206%2014.1917%206%2014.5136V17.5183C6%2018.0125%206.6135%2018.3352%207%2018.0189L11%2014.9858V13.5L7%2016.5V13.0118H4.5C3.78992%2013.0118%203%2012.732%203%2012.0346V5.50295C3%204.80547%203.78992%204.00118%204.5%204.00118H14.5C15.2101%204.00118%2016%204.80547%2016%205.50295V8.0059H17V5.50295C17%204.2153%2015.8109%203%2014.5%203Z%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%23FFFFFF%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 45534e386..d673cf708 100644
--- a/apps/documenteditor/mobile/resources/less/ios/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less
@@ -493,4 +493,9 @@ i.icon {
     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="@{green}"/></svg>');
   }
+  &.icon-insert-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 fill-rule="evenodd" clip-rule="evenodd" d="M20.1538 9.00708H11.8462C10.8266 9.00708 10 9.83461 10 10.8554V15.1694C10 16.1902 10.8266 17.0177 11.8462 17.0177H13.8329C13.9409 17.0177 14.0454 17.0556 14.1284 17.1248L18.243 20.392C18.5436 20.6428 19 20.4288 19 20.037V17.4798C19 17.2246 19.2066 17.0177 19.4615 17.0177H20.1538C21.1734 17.0177 22 16.1902 22 15.1694V10.8554C22 9.83461 21.1734 9.00708 20.1538 9.00708ZM20 10.0083C20.5523 10.0083 21 10.4565 21 11.0095V15.0154C21 15.5683 20.5523 16.0165 20 16.0165H18.0025L18 18.8995C18 19.2912 18 19 18 19L14.5 16.0165H12C11.4477 16.0165 11 15.5683 11 15.0154V11.0095C11 10.4565 11.4477 10.0083 12 10.0083H20Z" fill="@{themeColor}"/><path d="M14.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V12.0346C2 13.3222 3.18908 14.013 4.5 14.013H5.5C5.82773 14.013 6 14.1917 6 14.5136V17.5183C6 18.0125 6.6135 18.3352 7 18.0189L11 14.9858V13.5L7 16.5V13.0118H4.5C3.78992 13.0118 3 12.732 3 12.0346V5.50295C3 4.80547 3.78992 4.00118 4.5 4.00118H14.5C15.2101 4.00118 16 4.80547 16 5.50295V8.0059H17V5.50295C17 4.2153 15.8109 3 14.5 3Z" fill="@{themeColor}"/></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 40b21197f..cc2d96f0f 100644
--- a/apps/documenteditor/mobile/resources/less/material/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/material/_icons.less
@@ -439,6 +439,16 @@ 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 d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="@{themeColor}"/></svg>');
   }
+  &.icon-insert-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 fill-rule="evenodd" clip-rule="evenodd" d="M20.1538 9.00708H11.8462C10.8266 9.00708 10 9.83461 10 10.8554V15.1694C10 16.1902 10.8266 17.0177 11.8462 17.0177H13.8329C13.9409 17.0177 14.0454 17.0556 14.1284 17.1248L18.243 20.392C18.5436 20.6428 19 20.4288 19 20.037V17.4798C19 17.2246 19.2066 17.0177 19.4615 17.0177H20.1538C21.1734 17.0177 22 16.1902 22 15.1694V10.8554C22 9.83461 21.1734 9.00708 20.1538 9.00708ZM20 10.0083C20.5523 10.0083 21 10.4565 21 11.0095V15.0154C21 15.5683 20.5523 16.0165 20 16.0165H18.0025L18 18.8995C18 19.2912 18 19 18 19L14.5 16.0165H12C11.4477 16.0165 11 15.5683 11 15.0154V11.0095C11 10.4565 11.4477 10.0083 12 10.0083H20Z" fill="@{themeColor}"/><path d="M14.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V12.0346C2 13.3222 3.18908 14.013 4.5 14.013H5.5C5.82773 14.013 6 14.1917 6 14.5136V17.5183C6 18.0125 6.6135 18.3352 7 18.0189L11 14.9858V13.5L7 16.5V13.0118H4.5C3.78992 13.0118 3 12.732 3 12.0346V5.50295C3 4.80547 3.78992 4.00118 4.5 4.00118H14.5C15.2101 4.00118 16 4.80547 16 5.50295V8.0059H17V5.50295C17 4.2153 15.8109 3 14.5 3Z" 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="#FFFFFF"/></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 3ace1ab66..9a561db39 100644
--- a/apps/presentationeditor/mobile/resources/css/app-ios.css
+++ b/apps/presentationeditor/mobile/resources/css/app-ios.css
@@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply,
+.view-comment .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .add-comment .user-name,
 .page-view-comments .user-name,
@@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   min-height: 80px;
   height: 80px;
 }
-.container-view-add-comment {
-  height: 100%;
+#done-comment {
+  color: #aa5252;
 }
-.container-view-add-comment .navbar {
+.page-add-comment {
   background-color: #FFFFFF;
 }
-.container-view-add-comment .navbar a.link i + span {
-  margin-left: 0;
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
 }
-.container-view-add-comment .page {
-  background-color: #FFFFFF;
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
 }
-.container-view-add-comment .page .page-content {
-  padding: 0 16px 80px;
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
 }
-.popover.add-comment .toolbar-bottom {
-  position: absolute;
-  bottom: 0;
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
 }
-.popover.add-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);
-  border-radius: 0 0 13px 13px;
+.page-add-comment .wrap-comment .wrap-textarea {
+  margin-top: 16px;
+  padding-right: 6px;
 }
-.popover.add-comment .toolbar:before {
-  content: none;
-}
-.popover.add-comment .toolbar .toolbar-inner {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-}
-.popover.add-comment .wrap-comment {
-  padding-bottom: 80px;
-}
-.popover.add-comment .comment-textarea {
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
   border: 1px solid #c4c4c4;
-  border-radius: 5px;
-  min-height: 80px;
-  max-height: 300px;
-  width: 280px;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+  width: 100%;
 }
 .container-add-reply {
   height: 100%;
diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css
index df2107b28..1e3d2c4fc 100644
--- a/apps/presentationeditor/mobile/resources/css/app-material.css
+++ b/apps/presentationeditor/mobile/resources/css/app-material.css
@@ -6081,6 +6081,13 @@ html.phone .document-menu .list-block .item-link {
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.page-add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .page-add-comment .user-name,
 .page-view-comments .user-name,
@@ -6326,20 +6333,42 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment .list-block {
   margin-top: 0;
 }
-.container-view-add-comment,
+#done-comment {
+  padding: 0 16px;
+}
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
+}
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
+}
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
+}
+.page-add-comment .wrap-comment .wrap-textarea {
+  padding-right: 6px;
+}
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
+  border: 1px solid #c4c4c4;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+}
 .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 {
@@ -6357,43 +6386,36 @@ container-edit-comment .navbar:after {
   -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 {
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
index 1389f301e..5b03b9502 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@@ -6498,6 +6498,14 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply,
+.view-comment .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .add-comment .user-name,
 .page-view-comments .user-name,
@@ -6783,48 +6791,35 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   min-height: 80px;
   height: 80px;
 }
-.container-view-add-comment {
-  height: 100%;
+#done-comment {
+  color: #40865c;
 }
-.container-view-add-comment .navbar {
+.page-add-comment {
   background-color: #FFFFFF;
 }
-.container-view-add-comment .navbar a.link i + span {
-  margin-left: 0;
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
 }
-.container-view-add-comment .page {
-  background-color: #FFFFFF;
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
 }
-.container-view-add-comment .page .page-content {
-  padding: 0 16px 80px;
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
 }
-.popover.add-comment .toolbar-bottom {
-  position: absolute;
-  bottom: 0;
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
 }
-.popover.add-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);
-  border-radius: 0 0 13px 13px;
+.page-add-comment .wrap-comment .wrap-textarea {
+  margin-top: 16px;
+  padding-right: 6px;
 }
-.popover.add-comment .toolbar:before {
-  content: none;
-}
-.popover.add-comment .toolbar .toolbar-inner {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-}
-.popover.add-comment .wrap-comment {
-  padding-bottom: 80px;
-}
-.popover.add-comment .comment-textarea {
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
   border: 1px solid #c4c4c4;
-  border-radius: 5px;
-  min-height: 80px;
-  max-height: 300px;
-  width: 280px;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+  width: 100%;
 }
 .container-add-reply {
   height: 100%;
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
index 887889736..c887372bd 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
@@ -6091,6 +6091,13 @@ html.phone .document-menu .list-block .item-link {
   margin: 0;
   word-break: break-word;
 }
+.page-comments .list-reply,
+.page-add-comment .list-reply,
+.page-view-comments .list-reply,
+.container-edit-comment .list-reply,
+.container-add-reply .list-reply {
+  padding-left: 32px;
+}
 .page-comments .user-name,
 .page-add-comment .user-name,
 .page-view-comments .user-name,
@@ -6336,20 +6343,42 @@ html.phone .document-menu .list-block .item-link {
 .container-view-comment .list-block {
   margin-top: 0;
 }
-.container-view-add-comment,
+#done-comment {
+  padding: 0 16px;
+}
+.page-add-comment .wrap-comment {
+  padding: 16px 16px 0 16px;
+}
+.page-add-comment .wrap-comment .header-comment {
+  justify-content: flex-start;
+}
+.page-add-comment .wrap-comment .user-name {
+  font-weight: bold;
+}
+.page-add-comment .wrap-comment .comment-date {
+  font-size: 12px;
+  color: #6d6d72;
+}
+.page-add-comment .wrap-comment .wrap-textarea {
+  padding-right: 6px;
+}
+.page-add-comment .wrap-comment .wrap-textarea .comment-textarea {
+  border: 1px solid #c4c4c4;
+  margin-top: 0;
+  min-height: 100px;
+  border-radius: 4px;
+}
 .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 {
@@ -6367,43 +6396,36 @@ container-edit-comment .navbar:after {
   -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 {