diff --git a/src/routes/_components/status/Notification.html b/src/routes/_components/status/Notification.html
index b9f8be91..1a240587 100644
--- a/src/routes/_components/status/Notification.html
+++ b/src/routes/_components/status/Notification.html
@@ -10,6 +10,9 @@
            aria-label={ariaLabel}
            focus-key={focusKey}
            shortcut-key={shortcutScope}
+           on:focus="onFocus()"
+           on:blur="onBlur()"
+           ref:article
   >
     <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                   {account} {accountId} {uuid} isStatusInNotification="true" />
@@ -27,8 +30,7 @@
     border-bottom: 1px solid var(--main-border);
   }
   .notification-article:focus {
-    background-color: var(--status-active-background);
-    outline: none;
+    outline: none; /* focus is on the parent instead */
   }
   @media (max-width: 767px) {
     .notification-article {
@@ -84,6 +86,13 @@
       async mentionAuthor () {
         let { account } = this.get()
         await composeNewStatusMentioning(account)
+      },
+      // apply focus styles to parent rather than article because it shows up better
+      onFocus () {
+        this.refs.article.parentElement.classList.toggle('focus', true)
+      },
+      onBlur () {
+        this.refs.article.parentElement.classList.toggle('focus', false)
       }
     }
   }
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index dbf90575..7a44f7a9 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -6,7 +6,11 @@
          aria-posinset={index}
          aria-setsize={length}
          aria-label={ariaLabel}
-         on:recalculateHeight>
+         on:recalculateHeight
+         on:focus="onFocus()"
+         on:blur="onBlur()"
+         ref:article
+>
   {#if showHeader}
     <StatusHeader {...params} />
   {/if}
@@ -76,8 +80,7 @@
   }
 
   .status-article:focus {
-    background-color: var(--status-active-background);
-    outline: none;
+    outline: none; /* focus is on the parent instead */
   }
 
   .status-article.status-in-own-thread {
@@ -213,6 +216,13 @@
       async mentionAuthor () {
         let { accountForShortcut } = this.get()
         await composeNewStatusMentioning(accountForShortcut)
+      },
+      // apply focus styles to parent rather than article because it shows up better
+      onFocus () {
+        this.refs.article.parentElement.classList.toggle('focus', true)
+      },
+      onBlur () {
+        this.refs.article.parentElement.classList.toggle('focus', false)
       }
     },
     computed: {
diff --git a/src/scss/global.scss b/src/scss/global.scss
index cec825a5..21210014 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -173,7 +173,7 @@ ul, li, p {
   opacity: 0;
 }
 
-*:focus {
+*:focus, .focus {
   outline: 2px solid var(--focus-outline);
 }
 
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index c56dee63..178fc2ae 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -82,7 +82,6 @@
   --very-deemphasized-text-color: #{rgba(#666, 0.6)};
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
-  --status-active-background: #{lighten($body-bg-color, 2%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#e01f19};
   --alt-input-bg: #{rgba($main-bg-color, 0.7)};
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index de80da3c..8612e058 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -16,7 +16,6 @@
   --very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
-  --status-active-background: #{lighten($body-bg-color, 10%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#c7423d};
   --alt-input-bg: #{rgba($main-bg-color, 0.7)};