diff --git a/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx b/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx
index c45c9cabcb..3dde39f000 100644
--- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/actions/make-primary.tsx
@@ -40,12 +40,7 @@ const getDescription = (
 
 function PrimaryButton({ children, disabled, onClick }: Button.ButtonProps) {
   return (
-    <Button
-      bsSize="small"
-      bsStyle="success"
-      disabled={disabled}
-      onClick={onClick}
-    >
+    <Button bsSize="small" bsStyle="info" disabled={disabled} onClick={onClick}>
       {children}
     </Button>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails/email.tsx b/services/web/frontend/js/features/settings/components/emails/email.tsx
index a05850513a..a8d1761a8a 100644
--- a/services/web/frontend/js/features/settings/components/emails/email.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/email.tsx
@@ -17,7 +17,11 @@ function Email({ userEmailData }: EmailProps) {
   return (
     <>
       {userEmailData.email}
-      {userEmailData.default ? ' (primary)' : ''}
+      {userEmailData.default ? (
+        <span className="small ms-1">
+          <span className="label label-info">Primary</span>
+        </span>
+      ) : null}
       {!userEmailData.confirmedAt && (
         <div className="small">
           <strong>
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
index 3d4dc3bd3a..cf10324abe 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
@@ -50,7 +50,8 @@ describe('<EmailsRow/>', function () {
   describe('with affiliated email data', function () {
     it('renders email info', function () {
       renderEmailsRow(professionalUserData)
-      screen.getByText('foo@overleaf.com (primary)')
+      screen.getByText('foo@overleaf.com')
+      screen.getByText('Primary')
     })
 
     it('renders actions', function () {
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx
index e0862f03ec..3460b3afd6 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-section.test.tsx
@@ -73,7 +73,8 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [professionalUserData])
     render(<EmailsSection />)
 
-    await screen.findByText(`${professionalUserData.email} (primary)`)
+    await screen.findByText(`${professionalUserData.email}`)
+    screen.getByText('Primary')
   })
 
   it('shows confirmation status for unconfirmed users', async function () {