diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 690b46ed1..d0f3fd689 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -312,7 +312,10 @@ const Header = (props: Props) => {
                         <MenuButton
                           aria-label={__('Your account')}
                           title={__('Your account')}
-                          className="header__navigation-item menu__title header__navigation-item--icon"
+                          className={classnames('header__navigation-item', {
+                            'menu__title header__navigation-item--icon': !channelUrl,
+                            'header__navigation-item--profile-pic': channelUrl,
+                          })}
                           // @if TARGET='app'
                           onDoubleClick={e => {
                             e.stopPropagation();
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index b0af40022..0bfd21806 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -108,6 +108,23 @@
   }
 }
 
+.header__navigation-item--profile-pic {
+  .channel-thumbnail {
+    height: var(--height-button);
+    width: var(--height-button);
+    margin-right: 0;
+    border-radius: calc(var(--height-button) / 2);
+
+    img {
+      border-radius: calc(var(--height-button) / 2);
+    }
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
 .header__navigation-item--balance {
   @extend .button--link;
 }