diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js
index 3554eab7f1..331c486d27 100644
--- a/client/src/components/Header/Header.test.js
+++ b/client/src/components/Header/Header.test.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { create } from 'react-test-renderer';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
 import { UniversalNav } from './components/universal-nav';
@@ -129,10 +130,10 @@ describe('<AuthOrProfile />', () => {
       pathName: '/learn'
     };
 
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...defaultUserProps} />);
-    const view = shallow.getRenderOutput();
-    expect(avatarHasClass(view, 'default-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...defaultUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'default-border')).toBeTruthy();
   });
 
   it('has avatar with gold border for donating users', () => {
@@ -145,11 +146,11 @@ describe('<AuthOrProfile />', () => {
       pending: false,
       pathName: '/learn'
     };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...donatingUserProps} />);
-    const view = shallow.getRenderOutput();
 
-    expect(avatarHasClass(view, 'gold-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...donatingUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'gold-border')).toBeTruthy();
   });
 
   it('has avatar with blue border for top contributors', () => {
@@ -163,12 +164,12 @@ describe('<AuthOrProfile />', () => {
       pathName: '/learn'
     };
 
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...topContributorUserProps} />);
-    const view = shallow.getRenderOutput();
-
-    expect(avatarHasClass(view, 'blue-border')).toBeTruthy();
+    const componentTree = create(
+      <AuthOrProfile {...topContributorUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'blue-border')).toBeTruthy();
   });
+
   it('has avatar with purple border for donating top contributors', () => {
     const topDonatingContributorUserProps = {
       user: {
@@ -180,10 +181,11 @@ describe('<AuthOrProfile />', () => {
       pending: false,
       pathName: '/learn'
     };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...topDonatingContributorUserProps} />);
-    const view = shallow.getRenderOutput();
-    expect(avatarHasClass(view, 'purple-border')).toBeTruthy();
+
+    const componentTree = create(
+      <AuthOrProfile {...topDonatingContributorUserProps} />
+    ).toJSON();
+    expect(avatarHasClass(componentTree, 'purple-border')).toBeTruthy();
   });
 });
 
@@ -194,7 +196,7 @@ const navigationLinks = (component, key) => {
   return target.props;
 };
 
-const profileNavItem = component => component.props.children;
+const profileNavItem = component => component.children[0];
 
 const hasDonateNavItem = component => {
   const { children, to } = navigationLinks(component, 'donate');
@@ -282,9 +284,10 @@ const hasSignOutNavItem = component => {
 const hasSignInButton = component =>
   component.props.children[1].props.children === 'buttons.sign-in';
 */
+
 const avatarHasClass = (componentTree, classes) => {
   return (
     profileNavItem(componentTree).props.className ===
-    'avatar-nav-link ' + classes
+    'avatar-container ' + classes
   );
 };
diff --git a/client/src/components/Header/components/auth-or-profile.tsx b/client/src/components/Header/components/auth-or-profile.tsx
index 0d104c0648..b228a3806a 100644
--- a/client/src/components/Header/components/auth-or-profile.tsx
+++ b/client/src/components/Header/components/auth-or-profile.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // @ts-nocheck
 import React from 'react';
-import { Link, borderColorPicker, AvatarRenderer } from '../../helpers';
+import { Link, AvatarRenderer } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import Login from './Login';
 
@@ -17,26 +17,20 @@ const AuthOrProfile = ({ user }: AuthOrProfileProps): JSX.Element => {
   const isTopContributor =
     user && user.yearsTopContributor && user.yearsTopContributor.length > 0;
 
-  const badgeColorClass = borderColorPicker(isUserDonating, isTopContributor);
-
   if (!isUserSignedIn) {
     return (
       <Login data-test-label='landing-small-cta'>{t('buttons.sign-in')}</Login>
     );
   } else {
     return (
-      <>
-        <Link
-          className={`avatar-nav-link ${badgeColorClass}`}
-          to={`/${user.username as string}`}
-        >
-          <AvatarRenderer
-            picture={user.picture}
-            size='sm'
-            userName={user.username}
-          />
-        </Link>
-      </>
+      <Link className='avatar-nav-link' to={`/${user.username as string}`}>
+        <AvatarRenderer
+          isDonating={isUserDonating}
+          isTopContributor={isTopContributor}
+          picture={user.picture}
+          userName={user.username}
+        />
+      </Link>
     );
   }
 };
diff --git a/client/src/components/Header/components/menu-button.tsx b/client/src/components/Header/components/menu-button.tsx
index 7199280105..7b5cba31c0 100644
--- a/client/src/components/Header/components/menu-button.tsx
+++ b/client/src/components/Header/components/menu-button.tsx
@@ -30,9 +30,7 @@ const MenuButton = ({
       >
         {t('buttons.menu')}
       </button>
-      <span className='navatar'>
-        <AuthOrProfile user={user} />
-      </span>
+      <AuthOrProfile user={user} />
     </>
   );
 };
diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index 466fc45847..7d11a7330a 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/client/src/components/Header/components/universal-nav.css
@@ -187,38 +187,26 @@
   outline-offset: -3px;
 }
 
-.navatar {
-  display: contents;
-}
-
-.navatar .avatar-nav-link {
+.avatar-nav-link {
+  display: block;
   height: 31px;
   width: 31px;
 }
 
-.navatar .avatar-nav-link:hover,
-.navatar .avatar-nav-link:focus {
+.avatar-nav-link:hover,
+.avatar-nav-link:focus {
   background-color: var(--theme-color);
 }
 
-.navatar .default-border {
-  border: none;
-}
-
-.navatar .avatar-container svg {
-  display: inline;
-  background: var(--secondary-background);
-}
-
-.navatar .avatar-container {
+.avatar-nav-link .avatar-container {
   height: 100%;
 }
 
-.navatar .avatar-container svg,
-.navatar .avatar-container img {
+.avatar-nav-link .avatar-container svg,
+.avatar-nav-link .avatar-container img {
+  height: 100%;
   object-fit: cover;
   width: 100%;
-  height: 100%;
 }
 
 .gold-border {
@@ -234,7 +222,7 @@
 }
 
 .default-border {
-  border: 2px solid transparent;
+  border: 2px solid var(--gray-15);
 }
 
 .expand-nav {
diff --git a/client/src/components/helpers/border-color-picker.test.ts b/client/src/components/helpers/border-color-picker.test.ts
new file mode 100644
index 0000000000..0baec5930d
--- /dev/null
+++ b/client/src/components/helpers/border-color-picker.test.ts
@@ -0,0 +1,19 @@
+import borderColorPicker from './border-color-picker';
+
+describe('Border color picker helper', () => {
+  it('should get color for non donators and non top contributors', () => {
+    expect(borderColorPicker(false, false)).toEqual('default-border');
+  });
+
+  it('should get color for donators and top contributors', () => {
+    expect(borderColorPicker(true, true)).toEqual('purple-border');
+  });
+
+  it('should get color for only donators', () => {
+    expect(borderColorPicker(true, false)).toEqual('gold-border');
+  });
+
+  it('should get color for only top contributors', () => {
+    expect(borderColorPicker(false, true)).toEqual('blue-border');
+  });
+});
diff --git a/client/src/components/profile/__snapshots__/Profile.test.tsx.snap b/client/src/components/profile/__snapshots__/Profile.test.tsx.snap
index ebbee8353d..3bcca22d17 100644
--- a/client/src/components/profile/__snapshots__/Profile.test.tsx.snap
+++ b/client/src/components/profile/__snapshots__/Profile.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Profile/> renders correctly 1`] = `
         class="row"
       >
         <div
-          class="avatar-container col-xs-12"
+          class="avatar-camper col-xs-12"
         >
           <div
             class="avatar-container default-border"
diff --git a/client/src/components/profile/components/Camper.tsx b/client/src/components/profile/components/Camper.tsx
index 77c9f8b3cf..131dec4511 100644
--- a/client/src/components/profile/components/Camper.tsx
+++ b/client/src/components/profile/components/Camper.tsx
@@ -90,7 +90,7 @@ function Camper({
   return (
     <div>
       <Row>
-        <Col className='avatar-container' xs={12}>
+        <Col className='avatar-camper' xs={12}>
           <AvatarRenderer
             isDonating={isDonating}
             isTopContributor={yearsTopContributor.length > 0}
diff --git a/client/src/components/profile/components/camper.css b/client/src/components/profile/components/camper.css
index c70235277b..fbd7bbed57 100644
--- a/client/src/components/profile/components/camper.css
+++ b/client/src/components/profile/components/camper.css
@@ -1,14 +1,3 @@
-.avatar-container .avatar {
-  height: 180px;
-  width: 180px;
-  object-fit: cover;
-}
-
-.avatar-container {
-  display: flex;
-  justify-content: center;
-}
-
 .username,
 .name,
 .bio,
@@ -16,22 +5,21 @@
   overflow-wrap: break-word;
 }
 
-.avatar-container div {
+.avatar-camper {
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-camper .avatar {
+  height: 180px;
+  width: 180px;
+  object-fit: cover;
+}
+
+.avatar-camper div {
   height: 200px;
 }
 
-.avatar-container .gold-border {
-  border: 10px solid var(--yellow-gold);
-}
-
-.avatar-container .blue-border {
-  border: 10px solid var(--blue-mid);
-}
-
-.avatar-container .purple-border {
-  border: 10px solid var(--purple-mid);
-}
-
-.avatar-container .default-border {
-  border: 10px solid transparent;
+.avatar-camper .avatar-container {
+  border-width: 10px;
 }