diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 63004c26d..4fa1498ac 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -178,7 +178,7 @@ export class Inbox extends Component<any, InboxState> {
     return (
       <div class="btn-group btn-group-toggle">
         <label
-          className={`btn btn-sm btn-secondary pointer
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.All && 'active'}
           `}
         >
@@ -191,7 +191,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('all')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Replies && 'active'}
           `}
         >
@@ -204,7 +204,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('replies')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Mentions && 'active'}
           `}
         >
@@ -217,7 +217,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('mentions')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Messages && 'active'}
           `}
         >
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 245df42fa..bf67a5fdc 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -246,7 +246,7 @@ export class User extends Component<any, UserState> {
     return (
       <div class="btn-group btn-group-toggle">
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Overview && 'active'}
           `}
         >
@@ -259,7 +259,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('overview')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Comments && 'active'}
           `}
         >
@@ -272,7 +272,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('comments')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Posts && 'active'}
           `}
         >
@@ -285,7 +285,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('posts')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Saved && 'active'}
           `}
         >