diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
index 40f93f69f..6c325bc61 100644
--- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
+++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -273,6 +273,7 @@ function handleCommentSubmit(event) {
           else {
             window.location.replace(newComment.url)
           }
+          updateCommentsCount();
           initializeCommentsPage();
           initializeCommentDate();
           initializeCommentDropdown();
@@ -548,3 +549,10 @@ function listenForDetailsToggle() {
     });
   }
 }
+
+function updateCommentsCount() {
+  var commentsCountDiv = document.getElementsByClassName("js-comments-count")[0];
+  var commentsCountData = parseInt(commentsCountDiv.dataset.commentsCount) + 1;
+  commentsCountDiv.dataset.commentsCount = commentsCountData;
+  commentsCountDiv.innerHTML = `(${commentsCountData})`
+}
\ No newline at end of file
diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb
index ea0a81baa..ce6e2b8a8 100644
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@@ -2,11 +2,11 @@
   <section id="comments" data-updated-at="<%= Time.current %>" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
     <% if @article.show_comments %>
       <header class="relative flex justify-between items-center mb-6">
-        <h2 class="crayons-subtitle-1">Discussion</h2>
+        <h2 class="crayons-subtitle-1">Discussion <span class="js-comments-count" data-comments-count="<%= @article.comments_count %>">(<%= @article.comments_count %>)</span> </h2>
         <div id="comment-subscription">
           <div role="presentation" class="crayons-btn-group">
             <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
-          </div>
+          </div>  
         </div>
       </header>