diff --git a/app/assets/javascripts/discourse/app/widgets/post-small-action.js b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
index e13857f3311..246de3c0303 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
@@ -97,39 +97,8 @@ export default createWidget("post-small-action", {
 
   html(attrs) {
     const contents = [];
-
-    if (attrs.canRecover) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-recover",
-          icon: "undo",
-          action: "recoverPost",
-          title: "post.controls.undelete",
-        })
-      );
-    }
-
-    if (attrs.canDelete) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-delete",
-          icon: "trash-alt",
-          action: "deletePost",
-          title: "post.controls.delete",
-        })
-      );
-    }
-
-    if (attrs.canEdit && !attrs.canRecover) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-edit",
-          icon: "pencil-alt",
-          action: "editPost",
-          title: "post.controls.edit",
-        })
-      );
-    }
+    const buttons = [];
+    const customMessage = [];
 
     contents.push(
       avatarFor.call(this, "small", {
@@ -149,19 +118,56 @@ export default createWidget("post-small-action", {
         attrs.actionCodePath
       );
       contents.push(new RawHtml({ html: `<p>${description}</p>` }));
+    }
 
-      if (attrs.cooked) {
-        contents.push(
-          new RawHtml({
-            html: `<div class='custom-message'>${attrs.cooked}</div>`,
-          })
-        );
-      }
+    if (attrs.canRecover) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat small-action-recover",
+          icon: "undo",
+          action: "recoverPost",
+          title: "post.controls.undelete",
+        })
+      );
+    }
+
+    if (attrs.canEdit && !attrs.canRecover) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat small-action-edit",
+          icon: "pencil-alt",
+          action: "editPost",
+          title: "post.controls.edit",
+        })
+      );
+    }
+
+    if (attrs.canDelete) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat btn-danger small-action-delete",
+          icon: "trash-alt",
+          action: "deletePost",
+          title: "post.controls.delete",
+        })
+      );
+    }
+
+    if (!attrs.actionDescriptionWidget && attrs.cooked) {
+      customMessage.push(
+        new RawHtml({
+          html: `<div class='small-action-custom-message'>${attrs.cooked}</div>`,
+        })
+      );
     }
 
     return [
       h("div.topic-avatar", iconNode(icons[attrs.actionCode] || "exclamation")),
-      h("div.small-action-desc", contents),
+      h("div.small-action-desc", [
+        h("div.small-action-contents", contents),
+        h("div.small-action-buttons", buttons),
+        customMessage,
+      ]),
     ];
   },
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js
index 78323564497..90a7658f136 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js
@@ -16,9 +16,9 @@ module(
         hbs`<MountWidget @widget="post-small-action" @args={{this.args}} />`
       );
 
-      assert.ok(!exists(".small-action-desc > .small-action-delete"));
-      assert.ok(!exists(".small-action-desc > .small-action-recover"));
-      assert.ok(!exists(".small-action-desc > .small-action-edit"));
+      assert.ok(!exists(".small-action-desc .small-action-delete"));
+      assert.ok(!exists(".small-action-desc .small-action-recover"));
+      assert.ok(!exists(".small-action-desc .small-action-edit"));
     });
 
     test("shows edit button if canEdit", async function (assert) {
@@ -29,7 +29,7 @@ module(
       );
 
       assert.ok(
-        exists(".small-action-desc > .small-action-edit"),
+        exists(".small-action-desc .small-action-edit"),
         "it adds the edit small action button"
       );
     });
@@ -55,11 +55,11 @@ module(
       );
 
       assert.ok(
-        !exists(".small-action-desc > .small-action-edit"),
+        !exists(".small-action-desc .small-action-edit"),
         "it does not add the edit small action button"
       );
       assert.ok(
-        exists(".small-action-desc > .small-action-recover"),
+        exists(".small-action-desc .small-action-recover"),
         "it adds the recover small action button"
       );
     });
@@ -72,7 +72,7 @@ module(
       );
 
       assert.ok(
-        exists(".small-action-desc > .small-action-delete"),
+        exists(".small-action-desc .small-action-delete"),
         "it adds the delete small action button"
       );
     });
@@ -85,7 +85,7 @@ module(
       );
 
       assert.ok(
-        exists(".small-action-desc > .small-action-recover"),
+        exists(".small-action-desc .small-action-recover"),
         "it adds the recover small action button"
       );
     });
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index d21e8a6f575..6fab2deb383 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1123,121 +1123,107 @@ blockquote > *:last-child {
   display: flex;
   align-items: center;
 
+  &.deleted {
+    background-color: var(--danger-low-mid);
+  }
+
   .topic-avatar,
   .small-action-desc {
     border-top: 1px solid var(--primary-low);
   }
 
   .topic-avatar {
-    align-self: flex-start;
-    padding: 0.7em 0;
+    display: flex;
+    align-self: stretch;
     flex: 0 0 auto;
+    margin: 0;
+    padding-top: 1em;
     width: var(--topic-avatar-width);
+    justify-content: center;
     .d-icon {
-      font-size: 2em;
+      font-size: var(--font-up-3);
       width: var(--topic-avatar-width);
-      text-align: center;
       color: var(--primary-low-mid);
     }
   }
 
-  &.deleted {
-    background-color: var(--danger-low-mid);
-  }
-
-  .small-action-desc.timegap {
-    color: var(--primary-medium);
-  }
-
   .small-action-desc {
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
+    color: var(--primary-700);
     padding: 1em 0 1em var(--topic-body-width-padding);
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: var(--font-down-1);
-    color: var(--primary-medium);
     width: calc(
       var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
     );
     min-width: 0; // Allows flex container to shrink
 
-    button {
-      align-self: flex-start;
-      font-size: var(--font-up-1);
-      .d-icon {
-        font-size: var(--font-down-1);
-      }
-    }
-
-    .custom-message {
-      flex: 1 1 100%;
-      text-transform: none;
-      font-weight: normal;
-      font-size: var(--font-up-1);
-      order: 12;
-      word-break: break-word;
-      min-width: 0; // Allows content like oneboxes to shrink
-      p {
-        margin-bottom: 0;
-      }
-    }
-    a.trigger-user-card {
-      align-self: stretch;
-    }
     .avatar {
-      margin-right: 0.8em;
+      margin-right: 0.5em;
       float: left;
     }
 
-    > p {
+    p {
       margin: 0;
       padding-right: 0.5em;
-      line-height: var(--line-height-medium);
-      flex: 1 1;
-      .mention {
-        // needs some special sizing and positioning due to surrounding all-caps text
-        position: relative;
-        top: -1px;
-        font-size: var(--font-0);
-        text-transform: initial;
-      }
+    }
+  }
+
+  .small-action-contents {
+    flex: 1 1 auto;
+  }
+
+  .small-action-buttons {
+    margin-left: auto;
+  }
+
+  .small-action-custom-message {
+    flex: 1 1 100%;
+    font-weight: normal;
+    margin-top: 0.5em;
+    word-break: break-word;
+    min-width: 0; // Allows content like oneboxes to shrink
+    color: var(--primary);
+    p {
+      margin-bottom: 0;
     }
   }
 
   button {
     background: transparent;
-    border: 0;
-    order: 9;
-    &:last-of-type {
-      margin-left: auto;
-      order: 8;
+    font-size: var(--font-down-1);
+    .d-icon {
+      color: var(--primary-500);
+    }
+
+    .discourse-no-touch & {
+      &:hover,
+      &:focus {
+        background: var(--primary-200);
+        .d-icon {
+          color: var(--primary);
+        }
+      }
     }
   }
 
   &.topic-post-visited {
-    border-top: none;
-
-    + .small-action {
-      border-top: none;
-    }
-
     .topic-post-visited-line {
       text-align: center;
       border-bottom: 1px solid var(--danger-medium);
-      line-height: 0.1em;
-      margin: 1rem 0px;
+      z-index: z("base") + 2; // ensures last visit border is on top of post borders
+      line-height: 0;
+      margin: 0;
+      margin-bottom: -1px;
+      color: var(--danger-medium);
+      font-size: var(--font-down-1);
       width: calc(
         var(--topic-body-width) + var(--topic-avatar-width) +
           (var(--topic-body-width-padding) * 2)
       );
       .topic-post-visited-message {
         background-color: var(--secondary);
-        color: var(--danger-medium);
-        font-size: var(--font-down-1);
-        padding: 0 8px;
+        padding: 0 0.5em;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index 9b4325536cf..761d5e706ce 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -18,7 +18,7 @@ $primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
 $primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;
 $primary-500: dark-light-diff($primary, $secondary, 60%, -40%) !default;
 $primary-600: dark-light-diff($primary, $secondary, 50%, -35%) !default;
-$primary-700: dark-light-diff($primary, $secondary, 30%, -30%) !default;
+$primary-700: dark-light-diff($primary, $secondary, 38%, -30%) !default;
 $primary-800: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-900: dark-light-diff($primary, $secondary, 15%, -10%) !default;
 
diff --git a/app/assets/stylesheets/mobile/personal-message.scss b/app/assets/stylesheets/mobile/personal-message.scss
index d193ed5c96a..3dd3f0ebbdd 100644
--- a/app/assets/stylesheets/mobile/personal-message.scss
+++ b/app/assets/stylesheets/mobile/personal-message.scss
@@ -35,19 +35,6 @@
     width: 100%;
   }
 
-  .small-action {
-    margin-left: 0;
-  }
-
-  .small-action-desc.timegap {
-    margin-left: 0;
-    padding: 1em 1em 1em 0;
-  }
-
-  .small-action:not(.time-gap) {
-    padding: 1em;
-  }
-
   .topic-meta-data .names .first.staff {
     flex-basis: 100%;
     & + .second,
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index dd4e81e0e48..e5ff07b7daf 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -342,18 +342,6 @@ span.highlighted {
   /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
 }
 
-.small-action .topic-avatar {
-  display: flex;
-  align-self: stretch;
-  align-items: flex-start;
-  margin-right: 0;
-  float: unset;
-  height: auto;
-  .d-icon {
-    font-size: 1.8em;
-  }
-}
-
 .topic-meta-data {
   margin-left: 50px;
   font-size: var(--font-down-1);
diff --git a/plugins/chat/assets/stylesheets/common/common.scss b/plugins/chat/assets/stylesheets/common/common.scss
index 10ef7b7ad0b..133a99b718e 100644
--- a/plugins/chat/assets/stylesheets/common/common.scss
+++ b/plugins/chat/assets/stylesheets/common/common.scss
@@ -605,14 +605,6 @@ body.has-full-page-chat {
   }
 }
 
-.small-action {
-  .open-chat {
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size-adjust: var(--font-down-0);
-  }
-}
-
 .chat-message-collapser,
 .chat-message-text {
   > p {