diff --git a/config/app.php b/config/app.php
index a390eaf83..23aad7d48 100644
--- a/config/app.php
+++ b/config/app.php
@@ -18,7 +18,7 @@ return [
     |
     */
 
-    'debug' => env('APP_DEBUG', false),
+    'debug' => env('APP_DEBUG', true),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/config/database.php b/config/database.php
index 3883b5868..50f702e33 100644
--- a/config/database.php
+++ b/config/database.php
@@ -79,9 +79,9 @@ return [
         'mysql' => [
             'driver'    => 'mysql',
             'host'      => $mysql_host,
-            'database'  => env('DB_DATABASE', 'forge'),
-            'username'  => env('DB_USERNAME', 'forge'),
-            'password'  => env('DB_PASSWORD', ''),
+            'database'  => env('DB_DATABASE', 'bookstack'),
+            'username'  => env('DB_USERNAME', 'root'),
+            'password'  => env('DB_PASSWORD', 'Change123'),
             'port'      => $mysql_port,
             'charset'   => 'utf8mb4',
             'collation' => 'utf8mb4_unicode_ci',
diff --git a/resources/assets/js/vues/vues.js b/resources/assets/js/vues/vues.js
index a3f6ec8e5..e5ab50c4d 100644
--- a/resources/assets/js/vues/vues.js
+++ b/resources/assets/js/vues/vues.js
@@ -10,6 +10,7 @@ let vueMapping = {
     'code-editor': require('./code-editor'),
     'image-manager': require('./image-manager'),
     'tag-manager': require('./tag-manager'),
+    'page-comments': require('./page-comments')
 };
 
 window.vues = {};
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index ffa75cfed..24a8b3e23 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -1,18 +1,11 @@
-<script type="text/ng-template" id="comment-list-item.html">
-    @include('comments/list-item')
-</script>
-<script type="text/ng-template" id="comment-reply.html">
-    @include('comments/comment-reply', ['pageId' => $pageId])
-</script>
-<div ng-controller="CommentListController as vm" ng-init="pageId = <?= $page->id ?>" class="comments-list" ng-cloak>
-<h3>@{{vm.totalCommentsStr}}</h3>
-<hr>
-    <div class="comment-box" ng-repeat="comment in vm.comments track by comment.id">
-        <div ng-include src="'comment-list-item.html'">
-
-        </div>
-    </div>
-    <div ng-if="::vm.canComment()">
-        @include('comments/comment-reply', ['pageId' => $pageId])
-    </div>
+<div id="page-comments" page-id="<?= $page->id ?>" class="comments-list" v-cloak>
+  <h3>@{{totalCommentsStr}}</h3>
+  <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>
+  <div v-if="canComment">
+     <comment-reply v-on:comment-added.stop="commentAdded" :page-id="<?= $page->id ?>">
+     </comment-reply>
+  </div>
 </div>
\ No newline at end of file
diff --git a/resources/views/comments/list-item.blade.php b/resources/views/comments/list-item.blade.php
index f274d2ed2..72984d68d 100644
--- a/resources/views/comments/list-item.blade.php
+++ b/resources/views/comments/list-item.blade.php
@@ -1,30 +1,33 @@
-<div class='page-comment' id="comment-@{{::pageId}}-@{{::comment.id}}">
+<div class="comment-box">
+  <div class='page-comment' id="comment-@{{::pageId}}-@{{::comment.id}}">
     <div class="user-image">
-        <img ng-src="@{{::comment.created_by.avatar_url}}" alt="user avatar">
+      <img ng-src="@{{::comment.created_by.avatar_url}}" alt="user avatar">
     </div>
     <div class="comment-container">
-        <div class="comment-header">
-            <a href="@{{::comment.created_by.profile_url}}">@{{ ::comment.created_by.name }}</a>
-        </div>
-        <div ng-bind-html="comment.html" ng-if="::comment.active" class="comment-body" ng-class="!comment.active ? 'comment-inactive' : ''">
+      <div class="comment-header">
+        <a href="@{{::comment.created_by.profile_url}}">@{{ ::comment.created_by.name }}</a>
+      </div>
+      <div ng-bind-html="comment.html" ng-if="::comment.active" class="comment-body" ng-class="!comment.active ? 'comment-inactive' : ''">
 
+      </div>
+      <div ng-if="::!comment.active" class="comment-body comment-inactive">
+        {{ trans('entities.comment_deleted') }}
+      </div>
+      <div class="comment-actions">
+        <ul ng-if="!comment.is_hidden">
+          <li ng-if="::(level < 3 && vm.canComment())"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" is-reply="true">{{ trans('entities.comment_reply') }}</a></li>
+          <li ng-if="::vm.canEditDelete(comment, 'comment_update')"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment">{{ trans('entities.comment_edit') }}</a></li>
+          <li ng-if="::vm.canEditDelete(comment, 'comment_delete')"><a href="#" comment-delete-link comment="comment">{{ trans('entities.comment_delete') }}</a></li>
+          <li>{{ trans('entities.comment_create') }} <a title="@{{::comment.created.day_time_str}}" href="#?cm=comment-@{{::pageId}}-@{{::comment.id}}">@{{::comment.created.diff}}</a></li>
+          <li ng-if="::comment.updated"><span title="@{{::comment.updated.day_time_str}}">@{{ ::vm.trans('entities.comment_updated_text', { updateDiff: comment.updated.diff }) }}
+                          <a href="@{{::comment.updated_by.profile_url}}">@{{::comment.updated_by.name}}</a></span></li>
+        </ul>
+      </div>
+      <comment v-for="comment in comments = comment.sub_comments" v-bind:comment="comment" v-bind:index="index" v-bind:key="comment.id"></comment>
+      <div class="comment-box" ng-repeat="comment in comments = comment.sub_comments track by comment.id" ng-init="level = level + 1">
+        <div ng-include src="'comment-list-item.html'">
         </div>
-        <div ng-if="::!comment.active" class="comment-body comment-inactive">
-            {{ trans('entities.comment_deleted') }}
-        </div>
-        <div class="comment-actions">
-            <ul ng-if="!comment.is_hidden">
-                <li ng-if="::(level < 3 && vm.canComment())"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" is-reply="true">{{ trans('entities.comment_reply') }}</a></li>
-                <li ng-if="::vm.canEditDelete(comment, 'comment_update')"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" >{{ trans('entities.comment_edit') }}</a></li>
-                <li ng-if="::vm.canEditDelete(comment, 'comment_delete')"><a href="#" comment-delete-link comment="comment" >{{ trans('entities.comment_delete') }}</a></li>
-                <li>{{ trans('entities.comment_create') }} <a title="@{{::comment.created.day_time_str}}" href="#?cm=comment-@{{::pageId}}-@{{::comment.id}}">@{{::comment.created.diff}}</a></li>
-                <li ng-if="::comment.updated"><span title="@{{::comment.updated.day_time_str}}">@{{ ::vm.trans('entities.comment_updated_text', { updateDiff: comment.updated.diff }) }}
-                        <a href="@{{::comment.updated_by.profile_url}}">@{{::comment.updated_by.name}}</a></span></li>
-            </ul>
-        </div>
-        <div class="comment-box" ng-repeat="comment in comments = comment.sub_comments track by comment.id" ng-init="level = level + 1">
-            <div ng-include src="'comment-list-item.html'">
-            </div>
-        </div>
+      </div>
     </div>
+  </div>
 </div>
\ No newline at end of file