diff --git a/client/src/components/Header/components/SignedIn.js b/client/src/components/Header/components/SignedIn.js
index e917c2a938..66efeea117 100644
--- a/client/src/components/Header/components/SignedIn.js
+++ b/client/src/components/Header/components/SignedIn.js
@@ -15,8 +15,8 @@ const mapStateToProps = createSelector(
 
 function SignedIn({ picture }) {
   return (
-    <Link to='/settings'>
-      <img alt='' height='38px' src={picture} />
+    <Link className='settings-link' to='/settings'>
+      <img alt='' className='user-avatar' src={picture} />
     </Link>
   );
 }
diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css
index 598d94e010..f709288a45 100644
--- a/client/src/components/Header/header.css
+++ b/client/src/components/Header/header.css
@@ -26,7 +26,7 @@ header {
   align-items: center;
 }
 
-#top-nav img {
+#top-nav .nav-logo {
   max-height: 25px;
   min-width: 35px;
   margin: 0 5px;
@@ -169,10 +169,15 @@ header {
   color: #006400;
 }
 
-#top-right-nav .signup-btn {
+#top-right-nav .signup-btn,
+#top-right-nav .settings-link {
   margin: 0 15px;
 }
 
+#top-right-nav .user-avatar {
+  max-height: calc(var(--header-height) - 4px);
+}
+
 @media (max-width: 734px) {
   #top-nav {
     padding: 0;
@@ -188,13 +193,13 @@ header {
     padding: 10px 0;
   }
 
-  #top-nav img {
+  #top-nav .nav-logo {
     margin: 0 0 0 10px;
   }
 }
 
 @media (max-width: 420px) {
-  #top-nav img {
+  #top-nav .nav-logo {
     margin: 0 0 0 5px;
   }