diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 8b37379fa..7f2e6cdb4 100644
--- a/resources/assets/js/controllers.js
+++ b/resources/assets/js/controllers.js
@@ -145,176 +145,8 @@ module.exports = function (ngApp, events) {
 
     }]);
 
-    // Controller used to reply to and add new comments
-    ngApp.controller('CommentReplyController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
-        const MarkdownIt = require("markdown-it");
-        const md = new MarkdownIt({html: true});
-        let vm = this;
-
-        vm.saveComment = function () {
-            let pageId = $scope.comment.pageId || $scope.pageId;
-            let comment = $scope.comment.text;
-            if (!comment) {
-                return events.emit('warning', trans('errors.empty_comment'));
-            }
-            let commentHTML = md.render($scope.comment.text);
-            let serviceUrl = `/ajax/page/${pageId}/comment/`;
-            let httpMethod = 'post';
-            let reqObj = {
-                text: comment,
-                html: commentHTML
-            };
-
-            if ($scope.isEdit === true) {
-                // this will be set when editing the comment.
-                serviceUrl = `/ajax/page/${pageId}/comment/${$scope.comment.id}`;
-                httpMethod = 'put';
-            } else if ($scope.isReply === true) {
-                // if its reply, get the parent comment id
-                reqObj.parent_id = $scope.parentId;
-            }
-            $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
-                if (!isCommentOpSuccess(resp)) {
-                     return;
-                }
-                // hide the comments first, and then retrigger the refresh
-                if ($scope.isEdit) {
-                    updateComment($scope.comment, resp.data);
-                    $scope.$emit('evt.comment-success', $scope.comment.id);
-                } else {
-                    $scope.comment.text = '';
-                    if ($scope.isReply === true && $scope.parent.sub_comments) {
-                        $scope.parent.sub_comments.push(resp.data.comment);
-                    } else {
-                        $scope.$emit('evt.new-comment', resp.data.comment);
-                    }
-                    $scope.$emit('evt.comment-success', null, true);
-                }
-                $scope.comment.is_hidden = true;
-                $timeout(function() {
-                    $scope.comment.is_hidden = false;
-                });
-
-                events.emit('success', trans(resp.data.message));
-
-            }, checkError);
-
-        };
-
-        function checkError(response) {
-            let msg = null;
-            if (isCommentOpSuccess(response)) {
-                // all good
-                return;
-            } else if (response.data) {
-                msg = response.data.message;
-            } else {
-                msg = trans('errors.comment_add');
-            }
-            if (msg) {
-                events.emit('success', msg);
-            }
-        }
-    }]);
-
-    // Controller used to delete comments
-    ngApp.controller('CommentDeleteController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
-        let vm = this;
-
-        vm.delete = function(comment) {
-            $http.delete(window.baseUrl(`/ajax/comment/${comment.id}`)).then(resp => {
-                if (!isCommentOpSuccess(resp)) {
-                    return;
-                }
-                updateComment(comment, resp.data, $timeout, true);
-            }, function (resp) {
-                if (isCommentOpSuccess(resp)) {
-                    events.emit('success', trans('entities.comment_deleted'));
-                } else {
-                    events.emit('error', trans('error.comment_delete'));
-                }
-            });
-        };
-    }]);
-
     // Controller used to fetch all comments for a page
     ngApp.controller('CommentListController', ['$scope', '$http', '$timeout', '$location', function ($scope, $http, $timeout, $location) {
-        let vm = this;
-        $scope.errors = {};
-        // keep track of comment levels
-        $scope.level = 1;
-        vm.totalCommentsStr = trans('entities.comments_loading');
-        vm.permissions = {};
-        vm.trans = window.trans;
-
-        $scope.$on('evt.new-comment', function (event, comment) {
-            // add the comment to the comment list.
-            vm.comments.push(comment);
-            ++vm.totalComments;
-            setTotalCommentMsg();
-            event.stopPropagation();
-            event.preventDefault();
-        });
-
-        vm.canEditDelete = function (comment, prop) {
-            if (!comment.active) {
-                return false;
-            }
-            let propAll = prop + '_all';
-            let propOwn = prop + '_own';
-
-            if (vm.permissions[propAll]) {
-                return true;
-            }
-
-            if (vm.permissions[propOwn] && comment.created_by.id === vm.current_user_id) {
-                return true;
-            }
-
-            return false;
-        };
-
-        vm.canComment = function () {
-            return vm.permissions.comment_create;
-        };
-
-        // check if there are is any direct linking
-        let linkedCommentId = $location.search().cm;
-
-        $timeout(function() {
-            $http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/`)).then(resp => {
-                if (!isCommentOpSuccess(resp)) {
-                    // just show that no comments are available.
-                    vm.totalComments = 0;
-                    setTotalCommentMsg();
-                    return;
-                }
-                vm.comments = resp.data.comments;
-                vm.totalComments = +resp.data.total;
-                vm.permissions = resp.data.permissions;
-                vm.current_user_id = resp.data.user_id;
-                setTotalCommentMsg();
-                if (!linkedCommentId) {
-                    return;
-                }
-                $timeout(function() {
-                    // wait for the UI to render.
-                    focusLinkedComment(linkedCommentId);
-                });
-            }, checkError);
-        });
-
-        function setTotalCommentMsg () {
-            if (vm.totalComments === 0) {
-                vm.totalCommentsStr = trans('entities.no_comments');
-            } else if (vm.totalComments === 1) {
-                vm.totalCommentsStr = trans('entities.one_comment');
-            } else {
-                vm.totalCommentsStr = trans('entities.x_comments', {
-                    numComments: vm.totalComments
-                });
-            }
-        }
 
         function focusLinkedComment(linkedCommentId) {
             let comment = angular.element('#' + linkedCommentId);
@@ -324,46 +156,5 @@ module.exports = function (ngApp, events) {
 
             window.setupPageShow.goToText(linkedCommentId);
         }
-
-        function checkError(response) {
-            let msg = null;
-            if (isCommentOpSuccess(response)) {
-                // all good
-                return;
-            } else if (response.data) {
-                msg = response.data.message;
-            } else {
-                msg = trans('errors.comment_list');
-            }
-            if (msg) {
-                events.emit('success', msg);
-            }
-        }
     }]);
-
-    function updateComment(comment, resp, $timeout, isDelete) {
-        comment.text = resp.comment.text;
-        comment.updated = resp.comment.updated;
-        comment.updated_by = resp.comment.updated_by;
-        comment.active = resp.comment.active;
-        if (isDelete && !resp.comment.active) {
-            comment.html = trans('entities.comment_deleted');
-        } else {
-            comment.html = resp.comment.html;
-        }
-        if (!$timeout) {
-            return;
-        }
-        comment.is_hidden = true;
-        $timeout(function() {
-            comment.is_hidden = false;
-        });
-    }
-
-    function isCommentOpSuccess(resp) {
-        if (resp && resp.data && resp.data.status === 'success') {
-            return true;
-        }
-        return false;
-    }
 };
diff --git a/resources/assets/js/vues/components/comments/comment.js b/resources/assets/js/vues/components/comments/comment.js
index 4152ba61f..4b0c0a50b 100644
--- a/resources/assets/js/vues/components/comments/comment.js
+++ b/resources/assets/js/vues/components/comments/comment.js
@@ -18,13 +18,13 @@ const template = `
       </div>
       <div class="comment-actions">
           <ul>
-              <li v-if="(level < 3 && canComment)">
+              <li v-if="(level < 4 && canComment)">
                 <a href="#" comment="comment" v-on:click.prevent="replyComment">{{ trans('entities.comment_reply') }}</a>
               </li>
-              <li v-if="canUpdate">
+              <li v-if="canEditOrDelete('update')">
                 <a href="#" comment="comment" v-on:click.prevent="editComment">{{ trans('entities.comment_edit') }}</a>
               </li>
-              <li v-if="canDelete">
+              <li v-if="canEditOrDelete('delete')">
                 <a href="#" comment="comment" v-on:click.prevent="deleteComment">{{ trans('entities.comment_delete') }}</a>
               </li>
               <li>{{ trans('entities.comment_create') }}
@@ -46,8 +46,8 @@ const template = `
            :is-reply="isReply" :is-edit="isEdit">
         </comment-reply>
       </div>
-      <comment v-for="(comment, index) in comments" :initial-comment="comment"
-        :index="index" :level="nextLevel" :key="comment.id"
+      <comment v-for="(comment, index) in comments" :initial-comment="comment" :index="index"
+        :level="nextLevel" :key="comment.id" :permissions="permissions" :current-user-id="currentUserId"
         v-on:comment-added.stop="commentAdded"></comment>
 
   </div>
@@ -55,7 +55,7 @@ const template = `
 </div>
 `;
 
-const props = ['initialComment', 'index', 'level'];
+const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId'];
 
 function data () {
   return {
@@ -114,6 +114,34 @@ const methods = {
     // this is to handle non-parent child relationship
     // we want to make it go up.
     this.$emit('comment-added', event);
+  },
+  canEditOrDelete: function (prop) {
+    if (!this.comment.active) {
+      return false;
+    }
+
+    if (!this.permissions) {
+      return false;
+    }
+
+    let propAll = 'comment_' + prop + '_all';
+    let propOwn = 'comment_' + prop + '_own';
+
+    if (this.permissions[propAll]) {
+        return true;
+    }
+
+    if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
+        return true;
+    }
+
+    return false;
+  },
+  canComment: function () {
+    if (!this.permissions) {
+      return false;
+    }
+    return this.permissions.comment_create === true;
   }
 };
 
@@ -125,18 +153,6 @@ const computed = {
     set: function () {
       this.commentHref = `#?cm=${this.commentId}`
     }
-  },
-  canUpdate: function () {
-    return true;
-  },
-  canDelete: function () {
-    return true;
-  },
-  canComment: function () {
-    return true;
-  },
-  canUpdate: function () {
-    return true;
   }
 };
 
diff --git a/resources/assets/js/vues/page-comments.js b/resources/assets/js/vues/page-comments.js
index fd0ed6826..d3ce3006d 100644
--- a/resources/assets/js/vues/page-comments.js
+++ b/resources/assets/js/vues/page-comments.js
@@ -1,15 +1,11 @@
 const comment = require('./components/comments/comment');
 const commentReply = require('./components/comments/comment-reply');
 
-// 1. Remove code from controllers
-// 2. Remove code from services.
-// 3.
-
 let data = {
   totalCommentsStr: trans('entities.comments_loading'),
   comments: [],
   permissions: null,
-  current_user_id: null,
+  currentUserId: null,
   trans: trans,
   commentCount: 0
 };
@@ -39,7 +35,10 @@ let computed = {
     }
   },
   canComment: function () {
-    return true;
+    if (!this.permissions) {
+      return false;
+    }
+    return this.permissions.comment_create === true;
   }
 }
 
@@ -56,7 +55,7 @@ function mounted() {
     this.comments = resp.data.comments;
     this.totalComments = +resp.data.total;
     this.permissions = resp.data.permissions;
-    this.current_user_id = resp.data.user_id;
+    this.currentUserId = resp.data.user_id;
     if (!linkedCommentId) {
         return;
     }
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index 24a8b3e23..fcf284b26 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -3,7 +3,7 @@
   <hr>
   <comment v-for="(comment, index) in comments" :initial-comment="comment" :index="index" :level=1
      v-on:comment-added.stop="commentAdded"
-     :key="comment.id"></comment>
+     :current-user-id="currentUserId" :key="comment.id" :permissions="permissions"></comment>
   <div v-if="canComment">
      <comment-reply v-on:comment-added.stop="commentAdded" :page-id="<?= $page->id ?>">
      </comment-reply>