diff --git a/assets/views/artwork.jet.html b/assets/views/artwork.jet.html
index f1f2ceb..2e0ae48 100644
--- a/assets/views/artwork.jet.html
+++ b/assets/views/artwork.jet.html
@@ -1,18 +1,19 @@
 {{- extends "layout/default" }}
 {{- block body() }}
-<div class="row justify-content-center">
+<div class="row justify-content-center mb-5">
 <!-- col-md-9 to ensure that artworks don't take forever to scroll past, especially if there are multiple, but col-sm-12 to display artworks at full width on small devices -->
 <div class="col-sm-12 col-md-9">
 <div class="container">
-  <!-- The Artwork fragment; left outside a card -->
+  <!-- The artwork fragment -->
   {{- include "fragments/artwork" .Illust }}
+
   <!-- Recent works by artist -->
   <div class="card mb-4">
     <div class="card-body">
       <div class="d-flex justify-content-between align-items-center mb-3">
         <a class="text-decoration-none text-light d-flex align-items-center" href="/users/{{ .Illust.User.ID }}">
           <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle me-2" style="width: 48px; height: 48px;">
-          <span>Other works by {{ .Illust.User.Name }}</span>
+          <h2 class="h5 my-2">Other works by {{ .Illust.User.Name }}</h2>
           <span class="ms-2">&raquo;</span>
         </a>
         {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
@@ -31,61 +32,55 @@
     </div>
   </div>
 
-  <!-- mt-5 for spacing between the comments section and related works -->
-  <div class="accordion mb-5" id="commentsAccordion">
-    <div class="accordion-item">
-      <h2 class="accordion-header" id="headingComments">
-        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments" aria-expanded="false" aria-controls="collapseComments">
-          Comments
-        </button>
-      </h2>
-      <div id="collapseComments" class="accordion-collapse show" aria-labelledby="headingComments" data-bs-parent="#commentsAccordion">
-        <div class="accordion-body">
-          {{- if .Illust.CommentDisabled == 1 }}
-          <p>The creator turned comments off</p>
-          {{- else if .Illust.Comments == 0 }}
-          <p>There are no comments yet</p>
-          {{- else }}
-          <div class="list-group">
-            {{ range .Illust.CommentsList }}
-            <!-- Element for a single comment -->
-            <div class="list-group-item border-0">
-              <div class="d-flex mb-3">
-                <!-- Comment author avatar image -->
-                <a href="/users/{{ .AuthorID }}" class="me-3">
-                  <img class="rounded-circle img-fluid" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
-                </a>
-                <div>
-
-                <!-- Comment author name and date -->
-                <div class="d-flex align-items-center mb-2">
-                <a href="/users/{{ .AuthorID }}" class="text-body text-decoration-none me-2">
-                    <h6 class="fw-bold mb-0">{{- .AuthorName }}</h6>
-                </a>
-                <small class="text-muted">{{ .Date }}</small>
-                </div>
-
-                  <!-- Stamp or emoji -->
-                  <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
-                  {{- if .Stamp }}
-                  <img class="img-fluid rounded me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
-                    alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px;" />
-                  {{- else }}
-                  <!-- Comment with emojis -->
-                  <p class="m-0">
-                      {{ raw: parseEmojis(.Context) }}
-                  </p>
-                  {{ end }}
-                </div>
-              </div>
+  <!-- mb-5 for spacing between the end of the comments section card and related works -->
+  <div class="card mb-5">
+    <div class="card-header">
+      <h2 class="h5 my-2">Comments</h2>
+    </div>
+    <div class="card-body overflow-auto" style="max-height: 500px;">
+      {{- if .Illust.CommentDisabled == 1 }}
+      <p>The creator turned comments off</p>
+      {{- else if .Illust.Comments == 0 }}
+      <p>There are no comments yet</p>
+      {{- else }}
+      <div class="list-group">
+        {{ range .Illust.CommentsList }}
+        <!-- Element for a single comment -->
+        <div class="list-group-item border-0">
+          <div class="d-flex mb-3">
+            <!-- Comment author avatar image -->
+            <a href="/users/{{ .AuthorID }}" class="me-3">
+              <img class="rounded-circle img-fluid" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
+            </a>
+            <div>
+            <!-- Comment author name and date -->
+            <div class="d-flex align-items-center mb-2">
+            <a href="/users/{{ .AuthorID }}" class="text-body text-decoration-none me-2">
+                <h6 class="fw-bold mb-0">{{- .AuthorName }}</h6>
+            </a>
+            <small class="text-muted">{{ .Date }}</small>
+            </div>
+
+              <!-- Stamp or emoji -->
+              <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
+              {{- if .Stamp }}
+              <img class="img-fluid rounded me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
+                alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px;" />
+              {{- else }}
+              <!-- Comment with emojis -->
+              <p class="m-0">
+                  {{ raw: parseEmojis(.Context) }}
+              </p>
+              {{ end }}
             </div>
-            {{- end }}
           </div>
-          {{ end }}
         </div>
+        {{- end }}
       </div>
+      {{ end }}
     </div>
   </div>
+
 </div>
 </div>