diff --git a/.gitignore b/.gitignore
index d8a53e66..410eb3a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,8 @@ build
 .env
 .context
 tests/e2e/.results
+tests/.artifacts/visual
 CLAUDE.md
 .claude
 plugins-local/*
-!plugins-local/.gitkeep
\ No newline at end of file
+!plugins-local/.gitkeep
diff --git a/package.json b/package.json
index 55fcf4e7..91be8c5c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.25",
+  "version": "0.18.26",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
@@ -14,6 +14,7 @@
     "test:unit": "node --import ./tests/unit/env.js --test-isolation=none --test-force-exit --test 'tests/unit/specs/**/*.test.js'",
     "test:unit:coverage": "node --import ./tests/unit/env.js --test-isolation=none --test-force-exit --experimental-test-coverage --test-coverage-include='src/js/**' --test 'tests/unit/specs/**/*.test.js'",
     "test:e2e": "npx playwright test",
+    "test:visual": "VISUAL_CAPTURE_DIR=tests/.artifacts/visual npx playwright test tests/e2e/specs/views",
     "serve:static": "node scripts/serve-static.js",
     "prepare": "husky"
   },
diff --git a/src/css/style.css b/src/css/style.css
index 0380213e..3dfe0412 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -11,6 +11,7 @@
 
 button {
   color: inherit;
+  font-family: inherit;
 }
 
 html,
@@ -187,7 +188,7 @@ html {
   --message-input-z-index: 4;
   --reaction-palette-z-index: 5;
   --toast-z-index: 5;
-  --floating-compose-button-z-index: 6;
+  --fab-z-index: 6;
   --sidebar-z-index: 8;
   --lightbox-container-z-index: 9;
   --lightbox-z-index: 10;
@@ -493,19 +494,55 @@ plugin-rich-text {
   font-size: 15px;
 }
 
-.back-button {
-  display: flex;
+.text-pill-button {
+  background: none;
+  border: none;
+  font-size: 15px;
+  cursor: pointer;
+  padding: 8px 12px;
+  transition: color 0.2s;
+  border-radius: var(--pill-button-border-radius);
+  color: var(--highlight-color);
+}
+
+.text-pill-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.icon-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
-  border: none;
+  padding: 0;
   background: none;
-  cursor: pointer;
+  border: none;
   color: var(--icon-button-color);
+  cursor: pointer;
+  text-decoration: none;
   border-radius: var(--icon-button-border-radius);
+  transition: background-color 0.2s;
+}
+
+.icon-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.icon-button .icon {
+  width: 24px;
+  height: 24px;
+}
+
+@media (hover: hover) {
+  .icon-button:not(:disabled):hover {
+    background-color: var(--back-button-hover-color);
+  }
+}
+
+.back-button {
   height: 30px;
   width: 30px;
-  transition: background-color 0.2s;
 }
 
 .floating-back-button {
@@ -531,31 +568,10 @@ plugin-rich-text {
   height: 20px;
 }
 
-@media (hover: hover) {
-  .back-button:hover {
-    background-color: var(--back-button-hover-color);
-  }
-}
-
 .menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--text-color-muted);
   font-size: 24px;
   height: 30px;
   width: 30px;
-  border-radius: var(--icon-button-border-radius);
-  transition: background-color 0.2s;
-}
-
-@media (hover: hover) {
-  .menu-button:hover {
-    background-color: var(--back-button-hover-color);
-  }
 }
 
 @media (min-width: 800px) {
@@ -564,30 +580,6 @@ plugin-rich-text {
   }
 }
 
-.header-icon-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--text-color-muted);
-  border-radius: var(--icon-button-border-radius);
-  transition: background-color 0.2s;
-}
-
-@media (hover: hover) {
-  .header-icon-button:not(:disabled):hover {
-    background-color: var(--back-button-hover-color);
-  }
-}
-
-.header-icon-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .inbox-button {
   position: relative;
   height: 30px;
@@ -661,53 +653,17 @@ form label {
   color: var(--text-color-muted);
 }
 
-form button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 20px;
-  font-size: 15px;
-  border-radius: var(--pill-button-border-radius);
-  border: var(--hair) solid var(--post-border-color);
-  background: var(--background-color);
-  cursor: pointer;
-}
-
-form button.rounded-button {
+#login-form .rounded-button {
   padding: 10px 20px;
 }
 
-form button[type="submit"] {
-  font-weight: normal;
-  background: var(--primary-button-color);
-  color: var(--primary-button-text-color);
-}
-
-form button[type="submit"] .loading-spinner {
+#login-form .rounded-button-primary .loading-spinner {
   border-top-color: var(--primary-button-text-color);
   border-left-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
 }
 
-@media (hover: hover) {
-  form button[type="submit"]:hover {
-    background: var(--primary-button-hover-color);
-  }
-}
-
-form button:disabled {
-  opacity: 0.5;
-}
-
-@media (hover: hover) {
-  form button:hover {
-    background: var(--post-hover-color);
-  }
-}
-
 input,
 textarea,
 select {
@@ -1361,23 +1317,8 @@ plugin-blob-image .blob-image-fallback {
   margin-left: 10px;
   width: fit-content;
   padding: 12px 20px;
-  background-color: var(--primary-button-color);
-  color: var(--off-white);
-  border: none;
-  border-radius: var(--pill-button-border-radius);
   font-size: 16px;
   font-weight: 600;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: background-color 0.2s;
-}
-
-@media (hover: hover) {
-  .sidebar-compose-button:hover {
-    background-color: var(--primary-button-hover-color);
-  }
 }
 
 .sidebar-compose-button .icon {
@@ -1812,7 +1753,6 @@ container-link {
   color: var(--text-color-muted);
   font-size: 13px;
   cursor: pointer;
-  font-family: inherit;
   margin-left: 2px;
 }
 .who-can-reply-badge .icon {
@@ -3459,7 +3399,7 @@ image-carousel {
   width: 32px;
   height: 32px;
   background-color: var(--overlay-color-medium);
-  border-radius: 50%;
+  border-radius: var(--circular-button-border-radius);
 }
 
 .video-preview-play-button::after {
@@ -4321,24 +4261,13 @@ image-carousel {
 }
 
 .chat-join-link-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   gap: 6px;
   padding: 8px 14px;
-  border-radius: var(--pill-button-border-radius);
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
   font-weight: 600;
-  background: var(--primary-button-color);
-  color: var(--primary-button-text-color);
   width: 100%;
 }
 
 .chat-join-link-action[disabled] {
-  opacity: 0.6;
-  cursor: default;
   background: var(--secondary-button-color);
   color: var(--text-color);
 }
@@ -4594,7 +4523,7 @@ chat-input .rich-text-input-placeholder {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  border-radius: var(--circular-button-border-radius);
   background: transparent;
   border: none;
   display: flex;
@@ -4631,7 +4560,7 @@ chat-input .rich-text-input-placeholder {
   height: 40px;
   border-radius: var(--circular-button-border-radius);
   color: var(--primary-button-text-color);
-  background-color: var(--highlight-color);
+  background-color: var(--primary-button-color);
   border: none;
   display: flex;
   align-items: center;
@@ -6165,35 +6094,11 @@ emoji-picker-dialog emoji-picker,
   }
 }
 
-.post-composer-cancel-button {
-  background: none;
-  border: none;
-  font-size: 15px;
-  cursor: pointer;
-  padding: 8px 12px;
-  transition: color 0.2s;
-  border-radius: var(--pill-button-border-radius);
-  color: var(--highlight-color);
-}
-
 .post-composer-drafts-button {
-  background: none;
-  border: none;
-  font-size: 15px;
-  cursor: pointer;
-  padding: 8px 12px;
-  transition: color 0.2s;
-  border-radius: var(--pill-button-border-radius);
-  color: var(--highlight-color);
   margin-left: auto;
   margin-right: 8px;
 }
 
-.post-composer-drafts-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .post-composer-body {
   display: flex;
   gap: 13px;
@@ -6295,19 +6200,11 @@ emoji-picker-dialog emoji-picker,
 }
 
 .post-composer-add-post-button {
-  background: none;
-  border: none;
   padding: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--icon-button-border-radius);
-  transition: background-color 0.2s;
 }
 
 @media (hover: hover) {
-  .post-composer-add-post-button:hover {
+  .post-composer-add-post-button:not(:disabled):hover {
     background-color: var(--background-color-secondary);
   }
 }
@@ -6363,34 +6260,15 @@ emoji-picker-dialog emoji-picker,
 }
 
 .image-picker-button {
-  background: none;
-  border: none;
   padding: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--icon-button-border-radius);
-  transition: background-color 0.2s;
 }
 
 @media (hover: hover) {
-  .image-picker-button:hover {
+  .image-picker-button:not(:disabled):hover {
     background-color: var(--background-color-secondary);
   }
 }
 
-.image-picker-button:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-@media (hover: hover) {
-  .image-picker-button:disabled:hover {
-    background-color: transparent;
-  }
-}
-
 .image-picker-button .icon {
   width: 24px;
   height: 24px;
@@ -6403,20 +6281,12 @@ emoji-picker-dialog emoji-picker,
 }
 
 .post-composer-emoji-button {
-  background: none;
-  border: none;
   padding: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--icon-button-border-radius);
   color: var(--highlight-color);
-  transition: background-color 0.2s;
 }
 
 @media (hover: hover) {
-  .post-composer-emoji-button:hover {
+  .post-composer-emoji-button:not(:disabled):hover {
     background-color: var(--background-color-secondary);
   }
 }
@@ -6474,7 +6344,7 @@ emoji-picker-dialog emoji-picker,
   color: var(--error-color);
 }
 
-.floating-compose-button {
+.fab {
   display: flex;
   position: fixed;
   bottom: calc(70px + var(--safe-area-inset-bottom));
@@ -6483,11 +6353,11 @@ emoji-picker-dialog emoji-picker,
   height: 60px;
   border-radius: var(--circular-button-border-radius);
   background-color: var(--primary-button-color);
-  color: var(--off-white);
+  color: var(--primary-button-text-color);
   border: none;
   cursor: pointer;
   box-shadow: var(--shadow-color-light);
-  z-index: var(--floating-compose-button-z-index);
+  z-index: var(--fab-z-index);
   align-items: center;
   justify-content: center;
   transition:
@@ -6496,13 +6366,13 @@ emoji-picker-dialog emoji-picker,
 }
 
 @media (hover: hover) {
-  .floating-compose-button:hover {
+  .fab:hover {
     transform: scale(1.05);
     box-shadow: var(--shadow-color-hover);
   }
 }
 
-.floating-compose-button:active {
+.fab:active {
   transform: scale(0.95);
 }
 
@@ -6886,23 +6756,23 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
 }
 
 .modal-dialog-button.cancel-button {
-  background-color: light-dark(var(--lightest-gray), var(--light-gray));
+  background-color: var(--secondary-button-color);
 }
 
 @media (hover: hover) {
   .modal-dialog-button.cancel-button:hover {
-    background-color: light-dark(var(--lighter-gray), var(--light-gray));
+    background-color: var(--secondary-button-hover-color);
   }
 }
 
 .modal-dialog-button.primary-button {
   background-color: var(--primary-button-color);
-  color: var(--off-white);
+  color: var(--primary-button-text-color);
 }
 
 .modal-dialog-button.danger-button {
   background-color: var(--error-color);
-  color: var(--off-white);
+  color: var(--primary-button-text-color);
 }
 
 .modal-dialog-button.danger-subtle-button {
@@ -7431,24 +7301,10 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
 }
 
 .settings-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   gap: 6px;
   width: 100%;
   padding: 10px;
-  border-radius: var(--pill-button-border-radius);
-  border: none;
-  background: var(--highlight-color);
-  color: white;
   font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.settings-button:disabled {
-  opacity: 0.5;
-  cursor: default;
 }
 
 .settings-button .plus-icon {
@@ -7457,8 +7313,12 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
 }
 
 .settings-button .loading-spinner {
-  border-color: rgba(255, 255, 255, 0.3);
-  border-top-color: white;
+  border-color: color-mix(
+    in srgb,
+    var(--primary-button-text-color) 30%,
+    transparent
+  );
+  border-top-color: var(--primary-button-text-color);
 }
 
 .muted-word-delete-button .loading-spinner {
@@ -7539,7 +7399,7 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   border-radius: var(--pill-button-border-radius);
   border: var(--hair) solid var(--post-border-color);
   background: none;
-  color: var(--link-color);
+  color: var(--text-link-color);
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
@@ -7555,7 +7415,7 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
-  border-radius: 50%;
+  border-radius: var(--circular-button-border-radius);
   border: var(--hair) solid var(--post-border-color);
   background: none;
   color: var(--text-color-muted);
@@ -7791,14 +7651,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
 .drafts-dialog-back {
   position: absolute;
   left: 0;
-  background: none;
-  border: none;
-  font-size: 15px;
-  cursor: pointer;
-  padding: 8px 12px;
-  transition: color 0.2s;
-  border-radius: var(--pill-button-border-radius);
-  color: var(--highlight-color);
 }
 
 .drafts-dialog-list {
@@ -7909,26 +7761,11 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   margin-bottom: 4px;
 }
 
-.draft-item-delete {
-  background: none;
-  border: none;
-  color: var(--text-color-muted);
-  cursor: pointer;
-  border-radius: var(--icon-button-border-radius);
-  transition: background-color 0.2s;
-}
-
 .draft-item-delete .icon {
   width: 18px;
   height: 18px;
 }
 
-@media (hover: hover) {
-  .draft-item-delete:hover {
-    background-color: var(--back-button-hover-color);
-  }
-}
-
 .account-switcher-content {
   padding: 16px;
   /* Extra top padding leaves room for the sheet drag handle on mobile */
@@ -8427,10 +8264,6 @@ moderation-warning .toggle-content {
 }
 
 .error-state button {
-  border: none;
-  border-radius: var(--pill-button-border-radius);
-  cursor: pointer;
-  padding: 8px 16px;
   margin-top: 16px;
 }
 
@@ -9178,7 +9011,7 @@ toggle-switch {
   color: var(--primary-button-text-color);
   height: 33px;
   width: 33px;
-  border-radius: 50%;
+  border-radius: var(--circular-button-border-radius);
   transition: background-color 0.2s;
 }
 
@@ -9199,29 +9032,6 @@ toggle-switch {
   height: 16px;
 }
 
-.new-chat-fab {
-  display: flex;
-  position: fixed;
-  bottom: calc(70px + var(--safe-area-inset-bottom));
-  right: 20px;
-  width: 60px;
-  height: 60px;
-  border-radius: var(--circular-button-border-radius);
-  background-color: var(--primary-button-color);
-  color: var(--off-white);
-  border: none;
-  cursor: pointer;
-  box-shadow: var(--shadow-color-light);
-  z-index: var(--floating-compose-button-z-index);
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s;
-}
-
-.new-chat-fab:active {
-  transform: scale(0.95);
-}
-
 .new-chat-fab .icon {
   width: 28px;
   height: 28px;
@@ -9487,7 +9297,7 @@ tab-bar[full-width] .tab-bar-button {
   border: none;
   font-size: 16px;
   cursor: pointer;
-  color: var(--link-color);
+  color: var(--text-link-color);
   padding: 4px 0;
 }
 
@@ -9572,7 +9382,7 @@ tab-bar[full-width] .tab-bar-button {
   position: absolute;
   width: 24px;
   height: 24px;
-  border-radius: 50%;
+  border-radius: var(--circular-button-border-radius);
   background-color: light-dark(var(--lightest-gray), var(--dark-gray));
   border: 1px solid light-dark(var(--lighter-gray), var(--light-gray));
   display: flex;
@@ -9907,28 +9717,6 @@ image-cropper {
   gap: 12px;
 }
 
-.icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.icon-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.icon-button .icon {
-  width: 24px;
-  height: 24px;
-}
-
 .plugin-list-item.uninstalling {
   opacity: 0.5;
 }
@@ -10458,7 +10246,7 @@ p.setting-item-desc {
   flex: 0 0 auto;
   padding: 8px 14px;
   border: 1px solid color-mix(in srgb, var(--highlight-color) 35%, transparent);
-  border-radius: 999px;
+  border-radius: var(--pill-button-border-radius);
   background: transparent;
   color: var(--highlight-color);
   font-size: 13px;
diff --git a/src/js/components/drafts-dialog.js b/src/js/components/drafts-dialog.js
index b2ce330a..de80bb0a 100644
--- a/src/js/components/drafts-dialog.js
+++ b/src/js/components/drafts-dialog.js
@@ -144,7 +144,7 @@ function draftItemTemplate({ draftView, onSelect, onDelete }) {
       </div>
       <div class="draft-item-side">
         <button
-          class="draft-item-delete"
+          class="icon-button draft-item-delete"
           data-testid="draft-item-delete"
           aria-label="Delete draft"
           @click=${(e) => {
@@ -268,7 +268,7 @@ class DraftsDialog extends Component {
           <div class="drafts-dialog-content">
             <div class="drafts-dialog-header">
               <button
-                class="drafts-dialog-back"
+                class="text-pill-button drafts-dialog-back"
                 data-testid="drafts-dialog-back"
                 @click=${() => this.close()}
               >
diff --git a/src/js/components/post-composer.js b/src/js/components/post-composer.js
index 5b687a52..cef66b7f 100644
--- a/src/js/components/post-composer.js
+++ b/src/js/components/post-composer.js
@@ -558,7 +558,7 @@ class PostComposer extends Component {
           <div class="post-composer-content">
             <div class="post-composer-top-bar">
               <button
-                class="post-composer-cancel-button"
+                class="text-pill-button post-composer-cancel-button"
                 @click=${async () => {
                   if (await this.confirmClose()) {
                     this.close();
@@ -569,7 +569,7 @@ class PostComposer extends Component {
               </button>
               ${!this.replyTo && draftsEnabled
                 ? html`<button
-                    class="post-composer-drafts-button"
+                    class="text-pill-button post-composer-drafts-button"
                     data-testid="composer-drafts-button"
                     .disabled=${isSavingDraft}
                     @click=${() => this.handleDraftsButtonClick()}
@@ -644,7 +644,7 @@ class PostComposer extends Component {
                     }}
                   />
                   <button
-                    class="image-picker-button"
+                    class="icon-button image-picker-button"
                     @click=${() => this.handleMediaButtonClick()}
                     .disabled=${hasVideo || activePost.images.length >= 4}
                   >
@@ -653,7 +653,7 @@ class PostComposer extends Component {
                   <div class="post-composer-emoji-wrapper">
                     <button
                       type="button"
-                      class="post-composer-emoji-button"
+                      class="icon-button post-composer-emoji-button"
                       aria-label="Open emoji picker"
                       @click=${(e) => this.handleEmojiButtonClick(e)}
                     >
@@ -670,7 +670,7 @@ class PostComposer extends Component {
                 <div class="post-composer-bottom-bar-right">
                   ${canAddPost
                     ? html`<button
-                        class="post-composer-add-post-button"
+                        class="icon-button post-composer-add-post-button"
                         data-testid="composer-add-post-button"
                         aria-label="Add another post"
                         @click=${() => this.handleAddPost()}
diff --git a/src/js/templates/chatJoinLinkEmbed.template.js b/src/js/templates/chatJoinLinkEmbed.template.js
index 0ef54044..752ed80e 100644
--- a/src/js/templates/chatJoinLinkEmbed.template.js
+++ b/src/js/templates/chatJoinLinkEmbed.template.js
@@ -110,7 +110,7 @@ function actionButtonTemplate({ action, preview }) {
   const iconFn = ACTION_ICONS[action.icon];
   const icon = iconFn ? iconFn() : null;
   return html`<button
-    class="chat-join-link-action chat-join-link-action-${action.type}"
+    class="rounded-button rounded-button-primary chat-join-link-action chat-join-link-action-${action.type}"
     data-testid="join-link-embed-action"
     data-teststate=${action.type}
     ?disabled=${action.disabled}
diff --git a/src/js/templates/floatingComposeButton.template.js b/src/js/templates/floatingComposeButton.template.js
index 3d788d0b..f60e8ae4 100644
--- a/src/js/templates/floatingComposeButton.template.js
+++ b/src/js/templates/floatingComposeButton.template.js
@@ -3,7 +3,7 @@ import { editIconTemplate } from "/js/templates/icons/editIcon.template.js";
 
 export function floatingComposeButtonTemplate({ onClick }) {
   return html`<button
-    class="floating-compose-button"
+    class="fab floating-compose-button"
     data-testid="floating-compose-button"
     @click=${() => onClick()}
   >
diff --git a/src/js/templates/header.template.js b/src/js/templates/header.template.js
index 62a65ce7..168fa4e7 100644
--- a/src/js/templates/header.template.js
+++ b/src/js/templates/header.template.js
@@ -44,14 +44,14 @@ export function headerTemplate({
     >
       ${leftButton === "menu"
         ? html`<button
-            class="menu-button"
+            class="icon-button menu-button"
             data-testid="menu-button"
             @click=${onClickMenuButton}
           >
             ${menuIconTemplate()}
           </button>`
         : html`<button
-            class="back-button"
+            class="icon-button back-button"
             data-testid="back-button"
             @click=${onClickBackButton
               ? () => onClickBackButton()
diff --git a/src/js/templates/postFeed.template.js b/src/js/templates/postFeed.template.js
index e40cdaa6..2084d701 100644
--- a/src/js/templates/postFeed.template.js
+++ b/src/js/templates/postFeed.template.js
@@ -270,7 +270,9 @@ export function postFeedTemplate({
     console.error(error);
     return html`<div class="error-state">
       <div>Error loading posts</div>
-      <button @click=${() => window.location.reload()}>Try again</button>
+      <button class="rounded-button" @click=${() => window.location.reload()}>
+        Try again
+      </button>
     </div>`;
   }
 }
diff --git a/src/js/templates/sidebar.template.js b/src/js/templates/sidebar.template.js
index 82040574..464b6f90 100644
--- a/src/js/templates/sidebar.template.js
+++ b/src/js/templates/sidebar.template.js
@@ -302,7 +302,7 @@ export function sidebarTemplate({
       })}
       ${onClickComposeButton
         ? html`<button
-            class="sidebar-compose-button"
+            class="rounded-button rounded-button-primary sidebar-compose-button"
             data-testid="sidebar-compose-button"
             @click=${() => onClickComposeButton()}
           >
diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js
index 45f6b3ec..4e52ccf5 100644
--- a/src/js/views/chat.view.js
+++ b/src/js/views/chat.view.js
@@ -136,7 +136,7 @@ class ChatView extends View {
     function inboxButtonTemplate({ hasUnreadRequests }) {
       return html`
         <a
-          class="header-icon-button inbox-button"
+          class="icon-button inbox-button"
           href="/messages/inbox"
           aria-label=${hasUnreadRequests ? "Requests (unread)" : "Requests"}
           data-testid="inbox-button"
@@ -183,7 +183,9 @@ class ChatView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>There was an error loading conversations.</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
@@ -244,7 +246,7 @@ class ChatView extends View {
             })()}
           </main>
           <button
-            class="new-chat-fab"
+            class="fab new-chat-fab"
             aria-label="New chat"
             data-testid="new-chat-fab"
             @click=${() => handleNewChatClick()}
diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js
index a80ab5cd..65c1929e 100644
--- a/src/js/views/chatDetail.view.js
+++ b/src/js/views/chatDetail.view.js
@@ -1306,13 +1306,20 @@ class ChatDetailView extends View {
         return html`<div class="error-state" data-testid="convo-not-found">
           <h3>Not Found</h3>
           <div>Conversation not found</div>
-          <button @click=${() => window.location.reload()}>Try again</button>
+          <button
+            class="rounded-button"
+            @click=${() => window.location.reload()}
+          >
+            Try again
+          </button>
         </div>`;
       }
       console.error(error);
       return html`<div class="error-state" data-testid="messages-error">
         <div>There was an error loading messages.</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js
index 2351b26a..40d20c7e 100644
--- a/src/js/views/chatRequests.view.js
+++ b/src/js/views/chatRequests.view.js
@@ -207,7 +207,9 @@ class ChatRequestsView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>There was an error loading chat requests.</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/communityPluginListing.view.js b/src/js/views/communityPluginListing.view.js
index a47d7622..f9eaadcf 100644
--- a/src/js/views/communityPluginListing.view.js
+++ b/src/js/views/communityPluginListing.view.js
@@ -171,7 +171,10 @@ class CommunityPluginListingView extends View {
               if (loadError) {
                 return html`<div class="error-state">
                   <div>Failed to load plugin</div>
-                  <button @click=${() => window.location.reload()}>
+                  <button
+                    class="rounded-button"
+                    @click=${() => window.location.reload()}
+                  >
                     Try again
                   </button>
                 </div>`;
diff --git a/src/js/views/communityPlugins.view.js b/src/js/views/communityPlugins.view.js
index 917482f3..0f7ff307 100644
--- a/src/js/views/communityPlugins.view.js
+++ b/src/js/views/communityPlugins.view.js
@@ -33,7 +33,9 @@ class CommunityPluginsView extends View {
             ${error
               ? html`<div class="error-state">
                   <div>Failed to load plugins</div>
-                  <button @click=${() => loadListings()}>Try again</button>
+                  <button class="rounded-button" @click=${() => loadListings()}>
+                    Try again
+                  </button>
                 </div>`
               : !listings
                 ? html`<div
diff --git a/src/js/views/feeds.view.js b/src/js/views/feeds.view.js
index 895fc804..64ad4bbc 100644
--- a/src/js/views/feeds.view.js
+++ b/src/js/views/feeds.view.js
@@ -240,7 +240,7 @@ class FeedsView extends View {
                 </div>`;
               }
               return html`<button
-                class="header-icon-button header-edit-button"
+                class="icon-button header-edit-button"
                 data-testid="feeds-edit-button"
                 aria-label="Edit feeds"
                 @click=${() => state.$isEditing.set(true)}
diff --git a/src/js/views/groupChatDetails.view.js b/src/js/views/groupChatDetails.view.js
index 6eadaed4..ec71eb6c 100644
--- a/src/js/views/groupChatDetails.view.js
+++ b/src/js/views/groupChatDetails.view.js
@@ -112,13 +112,17 @@ function detailsErrorTemplate({ error }) {
     return html`<div class="error-state" data-testid="convo-not-found">
       <h3>Not Found</h3>
       <div>Conversation not found</div>
-      <button @click=${() => window.location.reload()}>Try again</button>
+      <button class="rounded-button" @click=${() => window.location.reload()}>
+        Try again
+      </button>
     </div>`;
   }
   console.error(error);
   return html`<div class="error-state" data-testid="group-details-error">
     <div>There was an error loading the group chat.</div>
-    <button @click=${() => window.location.reload()}>Try again</button>
+    <button class="rounded-button" @click=${() => window.location.reload()}>
+      Try again
+    </button>
   </div>`;
 }
 
diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js
index c8bc1567..80712eda 100644
--- a/src/js/views/home.view.js
+++ b/src/js/views/home.view.js
@@ -194,7 +194,12 @@ class HomeView extends View {
                   >View profile</a
                 ><br />`
             : ""}
-          <button @click=${() => window.location.reload()}>Try again</button>
+          <button
+            class="rounded-button"
+            @click=${() => window.location.reload()}
+          >
+            Try again
+          </button>
         </div>
       </div>`;
     }
@@ -229,7 +234,7 @@ class HomeView extends View {
             onClickMenuButton: () => handleMenuClick(),
             rightItemTemplate: () => html`
               <a
-                class="header-icon-button feeds-button"
+                class="icon-button feeds-button"
                 href="/feeds"
                 aria-label="Feeds"
                 data-testid="feeds-button"
diff --git a/src/js/views/notifications.view.js b/src/js/views/notifications.view.js
index 5c33f559..c8cf7107 100644
--- a/src/js/views/notifications.view.js
+++ b/src/js/views/notifications.view.js
@@ -596,7 +596,9 @@ class NotificationsView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>There was an error loading notifications.</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/postLikes.view.js b/src/js/views/postLikes.view.js
index 91bf7d60..32c50a1d 100644
--- a/src/js/views/postLikes.view.js
+++ b/src/js/views/postLikes.view.js
@@ -31,7 +31,9 @@ class PostLikesView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading likes</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/postQuotes.view.js b/src/js/views/postQuotes.view.js
index fa93bdf3..be355b41 100644
--- a/src/js/views/postQuotes.view.js
+++ b/src/js/views/postQuotes.view.js
@@ -33,7 +33,9 @@ class PostQuotesView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading quotes</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/postReposts.view.js b/src/js/views/postReposts.view.js
index 735b88bc..3cf94408 100644
--- a/src/js/views/postReposts.view.js
+++ b/src/js/views/postReposts.view.js
@@ -31,7 +31,9 @@ class PostRepostsView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading reposts</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/postThread.view.js b/src/js/views/postThread.view.js
index 4872979b..6e284b65 100644
--- a/src/js/views/postThread.view.js
+++ b/src/js/views/postThread.view.js
@@ -60,13 +60,23 @@ class PostThreadView extends View {
       ) {
         return html`<div class="error-state" data-testid="post-not-found">
           <div>Post not found</div>
-          <button @click=${() => window.location.reload()}>Try again</button>
+          <button
+            class="rounded-button"
+            @click=${() => window.location.reload()}
+          >
+            Try again
+          </button>
         </div>`;
       } else {
         console.error(error);
         return html`<div class="error-state" data-testid="thread-error">
           <div>Error loading thread</div>
-          <button @click=${() => window.location.reload()}>Try again</button>
+          <button
+            class="rounded-button"
+            @click=${() => window.location.reload()}
+          >
+            Try again
+          </button>
         </div>`;
       }
     }
diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js
index 522f24aa..2a3fa653 100644
--- a/src/js/views/profile.view.js
+++ b/src/js/views/profile.view.js
@@ -278,13 +278,20 @@ class ProfileView extends View {
         return html`<div class="error-state">
           <h3>Not Found</h3>
           <div>${message}</div>
-          <button @click=${() => window.location.reload()}>Try again</button>
+          <button
+            class="rounded-button"
+            @click=${() => window.location.reload()}
+          >
+            Try again
+          </button>
         </div>`;
       }
       console.error(error);
       return html`<div class="error-state">
         <div>There was an error loading the profile.</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/profileFollowers.view.js b/src/js/views/profileFollowers.view.js
index 827acec8..bab0116b 100644
--- a/src/js/views/profileFollowers.view.js
+++ b/src/js/views/profileFollowers.view.js
@@ -33,7 +33,9 @@ class ProfileFollowersView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading followers</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/profileFollowing.view.js b/src/js/views/profileFollowing.view.js
index 8cc99ee1..c53504bd 100644
--- a/src/js/views/profileFollowing.view.js
+++ b/src/js/views/profileFollowing.view.js
@@ -33,7 +33,9 @@ class ProfileFollowingView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading following</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/profileKnownFollowers.view.js b/src/js/views/profileKnownFollowers.view.js
index ce6622da..8276d2a5 100644
--- a/src/js/views/profileKnownFollowers.view.js
+++ b/src/js/views/profileKnownFollowers.view.js
@@ -33,7 +33,9 @@ class ProfileKnownFollowersView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading followers you know</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/settings/advanced.view.js b/src/js/views/settings/advanced.view.js
index 57ce73c5..ebff32bf 100644
--- a/src/js/views/settings/advanced.view.js
+++ b/src/js/views/settings/advanced.view.js
@@ -207,7 +207,7 @@ class SettingsAdvancedView extends View {
                 <div class="button-group">
                   <button
                     type="submit"
-                    class="settings-button"
+                    class="rounded-button rounded-button-primary settings-button"
                     ?disabled=${state.$loading.get() || !isDirty()}
                   >
                     Save and reload
@@ -257,7 +257,7 @@ class SettingsAdvancedView extends View {
                 <div class="button-group">
                   <button
                     type="submit"
-                    class="settings-button"
+                    class="rounded-button rounded-button-primary settings-button"
                     data-testid="install-unregistered-plugin-submit"
                     ?disabled=${state.$pluginInstallLoading.get()}
                   >
diff --git a/src/js/views/settings/blockedAccounts.view.js b/src/js/views/settings/blockedAccounts.view.js
index 9e2dc6bb..26cbf2f1 100644
--- a/src/js/views/settings/blockedAccounts.view.js
+++ b/src/js/views/settings/blockedAccounts.view.js
@@ -20,7 +20,9 @@ class SettingsBlockedAccountsView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading blocked accounts</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/settings/mutedAccounts.view.js b/src/js/views/settings/mutedAccounts.view.js
index a58bfa44..15b0f742 100644
--- a/src/js/views/settings/mutedAccounts.view.js
+++ b/src/js/views/settings/mutedAccounts.view.js
@@ -20,7 +20,9 @@ class SettingsMutedAccountsView extends View {
       console.error(error);
       return html`<div class="error-state">
         <div>Error loading muted accounts</div>
-        <button @click=${() => window.location.reload()}>Try again</button>
+        <button class="rounded-button" @click=${() => window.location.reload()}>
+          Try again
+        </button>
       </div>`;
     }
 
diff --git a/src/js/views/settings/mutedWords.view.js b/src/js/views/settings/mutedWords.view.js
index 387613c2..1f1af605 100644
--- a/src/js/views/settings/mutedWords.view.js
+++ b/src/js/views/settings/mutedWords.view.js
@@ -313,7 +313,7 @@ class SettingsMutedWordsView extends View {
               </label>
 
               <button
-                class="settings-button"
+                class="rounded-button rounded-button-primary settings-button"
                 data-testid="muted-word-add"
                 type="submit"
                 ?disabled=${state.$isSaving.get() || !state.$hasValue.get()}
diff --git a/tests/e2e/base.js b/tests/e2e/base.js
index 66afec20..3204be22 100644
--- a/tests/e2e/base.js
+++ b/tests/e2e/base.js
@@ -3,6 +3,21 @@ import fs from "node:fs";
 import path from "node:path";
 
 const cssCoverageDir = process.env.CSS_COVERAGE_DIR;
+const visualCaptureDir = process.env.VISUAL_CAPTURE_DIR;
+
+function visualCapturePath(testInfo) {
+  const fileName = path.basename(testInfo.file, ".test.js");
+  const title = testInfo.title
+    .replace(/[^a-z0-9]+/gi, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 120);
+  return path.join(
+    visualCaptureDir,
+    testInfo.project.name,
+    fileName,
+    `${title || testInfo.testId}.png`,
+  );
+}
 
 export const test = baseTest.extend({
   page: async ({ page, browserName }, use, testInfo) => {
@@ -23,6 +38,16 @@ export const test = baseTest.extend({
 
     await use(page);
 
+    if (visualCaptureDir) {
+      const screenshotPath = visualCapturePath(testInfo);
+      fs.mkdirSync(path.dirname(screenshotPath), { recursive: true });
+      await page.screenshot({
+        path: screenshotPath,
+        fullPage: true,
+        animations: "disabled",
+      });
+    }
+
     if (collectCssCoverage) {
       const entries = await page.coverage.stopCSSCoverage();
       const styleEntries = entries.filter((entry) =>