diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
new file mode 100644
index 000000000..268ceaed3
--- /dev/null
+++ b/app/assets/stylesheets/comments.css
@@ -0,0 +1,19 @@
+.comment {
+  inline-size: 100%;
+  flex-wrap: wrap;
+  border: 1px solid currentColor;
+  border-radius: 1em;
+  padding: var(--block-space);
+  position: relative;
+
+  &:after {
+    content: "";
+    background: currentColor;
+    block-size: var(--block-space);
+    inline-size: 4px;;
+    margin: auto;
+    position: absolute;
+    inset: auto 50% 0 auto;
+    margin-block-end: calc(var(--block-space) * -1);
+  }
+}
diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css
index 943ae4d6c..4802a8400 100644
--- a/app/assets/stylesheets/splats.css
+++ b/app/assets/stylesheets/splats.css
@@ -61,7 +61,7 @@
   }
 
   .splat__perma & {
-    --splat-size: 40vw !important;
+    --splat-size: 50vh !important;
   }
 }
 
diff --git a/app/views/splats/_splat.html.erb b/app/views/splats/_splat.html.erb
index 29beaeb2d..c136ad3a3 100644
--- a/app/views/splats/_splat.html.erb
+++ b/app/views/splats/_splat.html.erb
@@ -7,7 +7,7 @@
     <span class="for-screen-reader"><%= splat.title %></span>
   <% end %>
 
-  <time class="splat__bubble splat__meta splat__date"><%= splat.updated_at.strftime("%b <br> %d").html_safe %></time>
+  <time class="splat__bubble splat__meta splat__date"><%= splat.created_at.strftime("%b <br> %d").html_safe %></time>
 
   <% splat.categories.each do | category | %>
     <%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %>
diff --git a/app/views/splats/show.html.erb b/app/views/splats/show.html.erb
index 59e796a96..402f41722 100644
--- a/app/views/splats/show.html.erb
+++ b/app/views/splats/show.html.erb
@@ -35,41 +35,51 @@
   <% end %>
 </div>
 
-<section class="comments panel center borderless margin">
+<section class="comments panel center borderless margin-block flex flex-column gap">
   <div class="comment flex align-start gap">
-    <span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
-      <div class="flex-item-grow txt-align-start">
-      <header class="full-width flex align-center gap margin-block-start">
+    <header class="full-width margin-block">
+      Added by <strong>Jason Zimdars</strong> <%= time_ago_in_words @splat.created_at %> ago.
+    </header>
+  </div>
+
+  <div class="comment flex align-start gap">
+    <div class="flex align-center gap">
+      <span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
+      <header class="full-width flex align-center gap">
         <strong>Jason Zimdars</strong>
       </header>
-      <div class="comment__body">
-        <p>I'll be speaking in Chicago early next month at the ABA convention and they'll be sharing this resource with all State Bar Presidents. I mentioned Writebook in the intro towards the bottom. The platform is awesome! </p>
-      </div>
+    </div>
+    <div class="comment__body txt-align-start">
+      <p class="margin-none-block-start">I'll be speaking in Chicago early next month at the ABA convention and they'll be sharing this resource with all State Bar Presidents. I mentioned Writebook in the intro towards the bottom. The platform is awesome! </p>
     </div>
   </div>
 
   <div class="comment flex align-start gap">
-    <span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
-      <div class="flex-item-grow txt-align-start">
-      <header class="full-width flex align-center gap margin-block-start">
+    <div class="flex align-center gap">
+      <span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
+      <header class="full-width flex align-center gap">
         <strong>Jason Fried</strong>
       </header>
-      <div class="comment__body">
-        <p>Never mind, I nipped home and tried it on Browser Stack. It's working correctly on Windows with Edge, Chrome & Firefox. </p>
-      </div>
+    </div>
+    <div class="comment__body txt-align-start">
+      <p class="margin-none-block-start">Never mind, I nipped home and tried it on Browser Stack. It's working correctly on Windows with Edge, Chrome & Firefox. </p>
     </div>
   </div>
 
   <div class="comment flex align-start gap">
-    <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
-      <div class="flex-item-grow txt-align-start">
-      <header class="full-width flex align-center gap margin-block-start">
+    <div class="flex align-center gap">
+      <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
+      <header class="full-width flex align-center gap">
         <strong>Kevin McConnell</strong>
       </header>
-      <div class="comment__body">
-        <p>If this is only happening to one site, and potentially has already resolved itself, then I'll just dig into this on Monday and see if I can find an explanation or a way to reproduce it. Hopefully this isn't a sign of something more common, but so far doesn't sound like it. </p>
-        <p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
-      </div>
+    </div>
+    <div class="comment__body txt-align-start">
+      <p class="margin-none-block-start">If this is only happening to one site, and potentially has already resolved itself, then I'll just dig into this on Monday and see if I can find an explanation or a way to reproduce it. Hopefully this isn't a sign of something more common, but so far doesn't sound like it. </p>
+      <p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
     </div>
   </div>
+  <button class="btn btn--positive center">
+    <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
+    <span class="for-screen-reader">Add a comment</span>
+  </button>
 </section>