diff --git a/appview/pages/templates/repo/issues/fragments/issueCommentBody.html b/appview/pages/templates/repo/issues/fragments/issueCommentBody.html
new file mode 100644
index 00000000..0dbababe
--- /dev/null
+++ b/appview/pages/templates/repo/issues/fragments/issueCommentBody.html
@@ -0,0 +1,9 @@
+{{ define "repo/issues/fragments/issueCommentBody" }}
+<div id="comment-body-{{.Comment.Id}}">
+  {{ if not .Comment.Deleted }}
+    <div class="prose dark:prose-invert">{{ .Comment.Body | markdown }}</div>
+  {{ else }}
+    <div class="prose dark:prose-invert italic text-gray-500 dark:text-gray-400">[deleted by author]</div>
+  {{ end }}
+</div>
+{{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/issueCommentHeader.html b/appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
new file mode 100644
index 00000000..58fd6bf4
--- /dev/null
+++ b/appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
@@ -0,0 +1,56 @@
+{{ define "repo/issues/fragments/issueCommentHeader" }}
+  <div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 ">
+    {{ template "user/fragments/picHandleLink" .Comment.Did }}
+    {{ template "hats" $ }}
+    {{ template "timestamp" . }}
+    {{ $isCommentOwner := and .LoggedInUser (eq .LoggedInUser.Did .Comment.Did) }}
+    {{ if and $isCommentOwner (not .Comment.Deleted) }}
+      {{ template "edit" . }}
+      {{ template "delete" . }}
+    {{ end }}
+  </div>
+{{ end }}
+
+{{ define "hats" }}
+  {{ $isIssueAuthor := eq .Comment.Did .Issue.Did }}
+  {{ if $isIssueAuthor }}
+    (author)
+  {{ end }}
+{{ end }}
+
+{{ define "timestamp" }}
+  <a href="#{{ .Comment.Id }}"
+     class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-400 hover:underline no-underline"
+     id="{{ .Comment.Id }}">
+    {{ if .Comment.Deleted }}
+      {{ template "repo/fragments/shortTimeAgo" .Comment.Deleted }}
+    {{ else if .Comment.Edited }}
+      edited {{ template "repo/fragments/shortTimeAgo" .Comment.Edited }}
+    {{ else }}
+      {{ template "repo/fragments/shortTimeAgo" .Comment.Created }}
+    {{ end }}
+  </a>
+{{ end }}
+
+{{ define "edit" }}
+  <a
+    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group"
+    hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.Id }}/comment/{{ .Comment.Id }}/edit"
+    hx-swap="outerHTML"
+    hx-target="#comment-body-{{.Comment.Id}}">
+    {{ i "pencil" "size-3" }}
+  </a>
+{{ end }}
+
+{{ define "delete" }}
+  <a
+    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group"
+    hx-delete="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.Id }}/comment/{{ .Comment.Id }}/"
+    hx-confirm="Are you sure you want to delete your comment?"
+    hx-swap="outerHTML"
+    hx-target="#comment-body-{{.Comment.Id}}"
+    >
+    {{ i "trash-2" "size-3" }}
+    {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }}
+  </a>
+{{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/newComment.html b/appview/pages/templates/repo/issues/fragments/newComment.html
new file mode 100644
index 00000000..f55e3482
--- /dev/null
+++ b/appview/pages/templates/repo/issues/fragments/newComment.html
@@ -0,0 +1,145 @@
+{{ define "repo/issues/fragments/newComment" }}
+  {{ if .LoggedInUser }}
+  <form
+      id="comment-form"
+      hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
+      hx-on::after-request="if(event.detail.successful) this.reset()"
+  >
+    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
+      <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
+        {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
+      </div>
+          <textarea
+              id="comment-textarea"
+              name="body"
+              class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
+              placeholder="Add to the discussion. Markdown is supported."
+              onkeyup="updateCommentForm()"
+              rows="5"
+          ></textarea>
+          <div id="issue-comment"></div>
+      <div id="issue-action" class="error"></div>
+    </div>
+
+    <div class="flex gap-2 mt-2">
+        <button
+            id="comment-button"
+            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
+            type="submit"
+            hx-disabled-elt="#comment-button"
+            class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline group"
+            disabled
+        >
+            {{ i "message-square-plus" "w-4 h-4" }}
+            comment
+            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </button>
+
+        {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
+        {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
+        {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
+        {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "open") }}
+        <button
+            id="close-button"
+            type="button"
+            class="btn flex items-center gap-2"
+            hx-indicator="#close-spinner"
+            hx-trigger="click"
+        >
+            {{ i "ban" "w-4 h-4" }}
+            close
+            <span id="close-spinner" class="group">
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
+        </button>
+        <div
+            id="close-with-comment"
+            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
+            hx-trigger="click from:#close-button"
+            hx-disabled-elt="#close-with-comment"
+            hx-target="#issue-comment"
+            hx-indicator="#close-spinner"
+            hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
+            hx-swap="none"
+        >
+        </div>
+        <div
+            id="close-issue"
+            hx-disabled-elt="#close-issue"
+            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
+            hx-trigger="click from:#close-button"
+            hx-target="#issue-action"
+            hx-indicator="#close-spinner"
+            hx-swap="none"
+        >
+        </div>
+        <script>
+            document.addEventListener('htmx:configRequest', function(evt) {
+                if (evt.target.id === 'close-with-comment') {
+                    const commentText = document.getElementById('comment-textarea').value.trim();
+                    if (commentText === '') {
+                        evt.detail.parameters = {};
+                        evt.preventDefault();
+                    }
+                }
+            });
+        </script>
+        {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "closed") }}
+        <button
+            type="button"
+            class="btn flex items-center gap-2"
+            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
+            hx-indicator="#reopen-spinner"
+            hx-swap="none"
+        >
+            {{ i "refresh-ccw-dot" "w-4 h-4" }}
+            reopen
+            <span id="reopen-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
+        </button>
+        {{ end }}
+
+        <script>
+        function updateCommentForm() {
+            const textarea = document.getElementById('comment-textarea');
+            const commentButton = document.getElementById('comment-button');
+            const closeButton = document.getElementById('close-button');
+
+            if (textarea.value.trim() !== '') {
+                commentButton.removeAttribute('disabled');
+            } else {
+                commentButton.setAttribute('disabled', '');
+            }
+
+            if (closeButton) {
+                if (textarea.value.trim() !== '') {
+                    closeButton.innerHTML = `
+{{ i "ban" "w-4 h-4" }}
+<span>close with comment</span>
+<span id="close-spinner" class="group">
+    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+</span>`;
+                } else {
+                    closeButton.innerHTML = `
+{{ i "ban" "w-4 h-4" }}
+<span>close</span>
+<span id="close-spinner" class="group">
+    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+</span>`;
+                }
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            updateCommentForm();
+        });
+        </script>
+    </div>
+  </form>
+  {{ else }}
+    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-fit">
+      <a href="/login" class="underline">login</a> to join the discussion
+    </div>
+  {{ end }}
+{{ end }}