diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
index ca110830bf..b502f868b4 100644
--- a/src/components/ConnectButton.tsx
+++ b/src/components/ConnectButton.tsx
@@ -7,6 +7,9 @@ import ProfileModal from '@site/src/components/ProfileModal';
 import { useProgress } from '../hooks/use-progress';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useProfile } from '../hooks/use-profile';
+import { useGithubAvatar } from '../hooks/use-github-avatar';
+import { SocialType } from '../types/gold-star';
 
 const shortenAddress = (address: string) => {
   if (!address) return '';
@@ -15,6 +18,8 @@ const shortenAddress = (address: string) => {
 
 const ConnectButton: React.FC = () => {
   const { user, logIn, logOut } = useCurrentUser();
+  const { profile } = useProfile(user.addr);
+  const { avatar } = useGithubAvatar(profile?.socials?.[SocialType.GITHUB]);
   const [isProgressModalOpen, setIsProgressModalOpen] = useState(false);
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
   const { getProgress } = useProgress();
@@ -59,7 +64,15 @@ const ConnectButton: React.FC = () => {
       <Dropdown
         buttonLabel={
           <div className="flex items-center gap-2">
-            <FontAwesomeIcon icon={faUser} size="md" className="mx-auto" />
+            {avatar ? (
+              <img
+                src={avatar}
+                alt="Github Avatar"
+                className="w-6 h-6 rounded-full"
+              />
+            ) : (
+              <FontAwesomeIcon icon={faUser} size="md" className="mx-auto" />
+            )}
             <span className="text-sm text-gray-500">
               {formattedProgressValue}%
             </span>
diff --git a/src/hooks/use-persistent-cache.ts b/src/hooks/use-persistent-cache.ts
index 289ba47605..3f94db7c45 100644
--- a/src/hooks/use-persistent-cache.ts
+++ b/src/hooks/use-persistent-cache.ts
@@ -7,7 +7,7 @@ export function usePersistentCache<K extends {}, V extends {}>(
 ): LRUCache<K, V> {
   const [cache] = useState(() => {
     const cache = new LRUCache<K, V>(opts);
-    if (!localStorage) {
+    if (typeof window === 'undefined') {
       return cache;
     }
 
@@ -23,7 +23,7 @@ export function usePersistentCache<K extends {}, V extends {}>(
   });
 
   useEffect(() => {
-    if (!localStorage || typeof window === 'undefined') {
+    if (typeof window === 'undefined') {
       return;
     }