diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 1d96f57d..c12e4b75 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -22,13 +22,17 @@
         }
     }
 
+    &.profile > div {
+        padding: 6px 12px;
+    }
+
     a {
         color: $grey-40;
     }
 
     & > a, & > span {
         display: block;
-        padding: 12px;
+        padding: 12px 12px;
     }
 
     & > div {
@@ -37,16 +41,23 @@
         flex-direction: row;
         padding: 10px 12px;
 
-        span {
-            flex-grow: 1;
-        }
-
         &:hover {
             i.tag {
                 background: $grey-60;
                 color: white;
             }
         }
+
+        span {
+            flex-grow: 1;
+        }
+
+        img {
+            $diameter: 32px;
+            border-radius: $diameter / 2;
+            height: $diameter;
+            width: $diameter;
+        }
     }
 }
 
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 66ee0398..23fcbe99 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import { useSnapshot } from 'valtio'
-
-import { accountState } from '~utils/accountState'
+import { useCookies } from 'react-cookie'
 
 import AboutModal from '~components/AboutModal'
 import AccountModal from '~components/AccountModal'
@@ -18,14 +16,27 @@ interface Props {
 }
 
 const HeaderMenu = (props: Props) => {
-    const { account } = useSnapshot(accountState)
+    
+    const [cookies] = useCookies()
+
     function authItems() {
         return (
             <nav>
                 <ul className="Menu auth">
                     <div className="MenuGroup">
-                        <li className="MenuItem">
-                            <Link href={`/${account.user?.username}` || ''}>{account.user?.username}</Link>
+                        <li className="MenuItem profile">
+                            <Link href={`/${cookies.user?.username}` || ''}>
+                                <div>
+                                    <span>{cookies.user?.username}</span>
+                                    <img 
+                                        alt={cookies.user?.picture}
+                                        className={`profile ${cookies.user?.element}`}
+                                        srcSet={`/profile/${cookies.user?.picture}.png,
+                                                /profile/${cookies.user?.picture}@2x.png 2x`}
+                                        src={`/profile/${cookies.user?.picture}.png`} 
+                                    />
+                                </div
+                            ></Link>
                         </li>
                         <li className="MenuItem">
                             <Link href={`/saved` || ''}>Saved</Link>
@@ -66,8 +77,11 @@ const HeaderMenu = (props: Props) => {
                             <Link href='/teams'>Teams</Link>
                         </li>
 
-                        <li className="MenuItem">
-                            <Link href='/guides'>Guides</Link>
+                        <li className="MenuItem disabled">
+                            <div>
+                                <span>Guides</span>
+                                <i className="tag">Coming Soon</i>
+                            </div>
                         </li>
                     </div>
                 <div className="MenuGroup">