diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb
index d914422d6..7e685d88c 100644
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -1,4 +1,6 @@
 <article id="comment_<%= comment.id %>" class="comment message"
+          x-data="{ showThresholded: false }"
+          x-bind:data-show-thresholded="String(showThresholded)"
           data-id="<%= comment.id %>"
           data-post-id="<%= comment.post_id %>"
           data-creator-id="<%= comment.creator_id unless redact_deleted? %>"
@@ -11,7 +13,8 @@
           data-is-thresholded="<%= thresholded? %>"
           data-is-reported="<%= reported? %>"
           data-is-upvoted="<%= upvoted? %>"
-          data-is-downvoted="<%= downvoted? %>">
+          data-is-downvoted="<%= downvoted? %>"
+          data-show-thresholded="false">
 
   <div class="author">
     <div class="author-name">
@@ -28,11 +31,9 @@
   </div>
 
   <div class="content">
-    <% if thresholded? %>
-      <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link" %>
-    <% end %>
+    <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link", "x-on:click": "showThresholded = true" %>
 
-    <%= tag.div class: "body prose", style: ("display: none;" if thresholded?) do %>
+    <%= tag.div class: "body prose" do %>
       <% if redact_deleted? %>
         <p>[deleted]</p>
       <% else %>
diff --git a/app/components/comment_component/comment_component.scss b/app/components/comment_component/comment_component.scss
index c4bab3c97..18ba1ddc3 100644
--- a/app/components/comment_component/comment_component.scss
+++ b/app/components/comment_component/comment_component.scss
@@ -17,6 +17,14 @@ article.comment {
     }
   }
 
+  &[data-is-thresholded="true"][data-show-thresholded="false"] {
+    .body { display: none; }
+  }
+
+  &[data-is-thresholded="false"], &[data-is-thresholded="true"][data-show-thresholded="true"] {
+    .unhide-comment-link { display: none; }
+  }
+
   .unhide-comment-link {
     margin-bottom: 0.75rem;
     display: block;
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 0edbd8fb3..b4e1cc6a0 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -10,6 +10,8 @@ require('@rails/ujs').start();
 require('hammerjs');
 require('jquery-hotkeys');
 import morphdom from 'morphdom';
+import Alpine from 'alpinejs';
+import morph from '@alpinejs/morph';
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -93,4 +95,8 @@ Danbooru.error = Utility.error;
 window.$ = jQuery;
 window.jQuery = jQuery;
 window.morphdom = morphdom;
+window.Alpine = Alpine;
 window.Danbooru = Danbooru;
+
+Alpine.plugin(morph);
+Alpine.start();
diff --git a/app/javascript/src/javascripts/comment_component.js b/app/javascript/src/javascripts/comment_component.js
index cbb03c41c..e4446d7af 100644
--- a/app/javascript/src/javascripts/comment_component.js
+++ b/app/javascript/src/javascripts/comment_component.js
@@ -5,7 +5,6 @@ class CommentComponent {
     if ($("#c-posts #a-show, #c-comments").length) {
       $(document).on("click.danbooru.comment", ".edit_comment_link", CommentComponent.showEditForm);
       $(document).on("click.danbooru.comment", ".expand-comment-response", CommentComponent.showNewCommentForm);
-      $(document).on("click.danbooru.comment", ".unhide-comment-link", CommentComponent.unhideComment);
       $(document).on("click.danbooru.comment", ".comment-copy-id", CommentComponent.copyID);
       $(document).on("click.danbooru.comment", ".comment-copy-link", CommentComponent.copyLink);
     }
@@ -25,13 +24,6 @@ class CommentComponent {
     e.preventDefault();
   }
 
-  static unhideComment(e) {
-    let $comment = $(this).closest(".comment");
-    $comment.find(".unhide-comment-link").hide();
-    $comment.find(".body").show();
-    e.preventDefault();
-  }
-
   static async copyID(e) {
     let id = $(this).closest(".comment").data("id");
     let link = `comment #${id}`;
diff --git a/app/views/comment_votes/create.js.erb b/app/views/comment_votes/create.js.erb
index 3439ecfba..471b5ea11 100644
--- a/app/views/comment_votes/create.js.erb
+++ b/app/views/comment_votes/create.js.erb
@@ -2,5 +2,8 @@
   Danbooru.Utility.notice("<%= j flash[:notice] %>");
 <% end %>
 
-var $comment = $("article#comment_<%= @comment_vote.comment_id %>");
-$comment.replaceWith("<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>");
+$(function() {
+  let $comment = $("article#comment_<%= @comment_vote.comment_id %>").get(0);
+  let html = "<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>";
+  Alpine.morph($comment, html);
+});
diff --git a/package.json b/package.json
index 64adb76dc..6b54f2b11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "license": "MIT",
   "dependencies": {
+    "@alpinejs/morph": "^3.9.0",
     "@babel/plugin-proposal-decorators": "^7.16.7",
     "@fontsource/anton": "^4.0.0",
     "@fontsource/archivo-narrow": "^4.0.0",
@@ -14,6 +15,7 @@
     "@rails/ujs": "^7.0.1",
     "@rails/webpacker": "=6.0.0-rc.6",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2022.1.31",
+    "alpinejs": "^3.9.0",
     "core-js": "^3.20.3",
     "css-loader": "^6.5.1",
     "dropzone": "^6.0.0-beta.2",
diff --git a/yarn.lock b/yarn.lock
index 834d2d73f..a5361d334 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,13 @@ __metadata:
   version: 4
   cacheKey: 7
 
+"@alpinejs/morph@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@alpinejs/morph@npm:3.9.0"
+  checksum: 8c338eaa902dfe5bb5c80023ee00e579401de02080f4fafa4455d44ddb6a4949178e8fbe6146b312b44c0876ca6da5606d9f94f45e77fa0338ea45d71b3b2baa
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.0.0":
   version: 2.1.1
   resolution: "@ampproject/remapping@npm:2.1.1"
@@ -1891,6 +1898,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity@npm:~3.1.1":
+  version: 3.1.5
+  resolution: "@vue/reactivity@npm:3.1.5"
+  dependencies:
+    "@vue/shared": 3.1.5
+  checksum: 045103ae77f32b02e0d3d0b3b2503388e0282f07d1bdabff5a2dc01db05d0ff8b259069c17c060124658933146e47e6c7c8155e4923f1c0cf045e1e29e29c592
+  languageName: node
+  linkType: hard
+
+"@vue/shared@npm:3.1.5":
+  version: 3.1.5
+  resolution: "@vue/shared@npm:3.1.5"
+  checksum: 1f4395e246942486a50f0f9ba3955d81012753104d015b3be62797ed723aa39b62453ba6c50ae189fcab64945a53354e5f255613b3bb7c1a0f5261374d5e11f4
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.1":
   version: 1.11.1
   resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -2221,6 +2244,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"alpinejs@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "alpinejs@npm:3.9.0"
+  dependencies:
+    "@vue/reactivity": ~3.1.1
+  checksum: 6ece3b07330e78944d8cca8ef0536e681017a238d3084a47c0d5d93156e3f9bc1affed518799b23131fba58961f4bd3192676d2400704de1b3f265379f068548
+  languageName: node
+  linkType: hard
+
 "ansi-html-community@npm:^0.0.8":
   version: 0.0.8
   resolution: "ansi-html-community@npm:0.0.8"
@@ -7083,6 +7115,7 @@ fsevents@~2.3.2:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
+    "@alpinejs/morph": ^3.9.0
     "@babel/cli": ^7.16.8
     "@babel/eslint-parser": ^7.16.5
     "@babel/plugin-proposal-decorators": ^7.16.7
@@ -7099,6 +7132,7 @@ fsevents@~2.3.2:
     "@rails/webpacker": =6.0.0-rc.6
     "@ruffle-rs/ruffle": 0.1.0-nightly.2022.1.31
     "@webpack-cli/serve": ^1.6.0
+    alpinejs: ^3.9.0
     core-js: ^3.20.3
     css-loader: ^6.5.1
     dropzone: ^6.0.0-beta.2