diff --git a/README.md b/README.md
index 9329f6d3..71f71c97 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ We prioritize issues depending on the most requested features from our users, pl
 
 [🚢 LearnHouse General Roadmap](https://www.learnhouse.app/roadmap)
 
-[👨‍💻 Detailed Roadmap](https://github.com/orgs/learnhouse/projects/4/views/1)
+[👨‍💻 Detailed Roadmap](https://github.com/orgs/learnhouse/projects/4)
 
 ## Overview
 
diff --git a/apps/web/components/Objects/UserAvatar.tsx b/apps/web/components/Objects/UserAvatar.tsx
index 62d38ffc..ff62c3de 100644
--- a/apps/web/components/Objects/UserAvatar.tsx
+++ b/apps/web/components/Objects/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { getUriWithOrg } from '@services/config/config'
 import { useParams } from 'next/navigation'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
@@ -8,12 +8,7 @@ type UserAvatarProps = {
   width?: number
   avatar_url?: string
   use_with_session?: boolean
-  rounded?:
-  | 'rounded-md'
-  | 'rounded-xl'
-  | 'rounded-lg'
-  | 'rounded-full'
-  | 'rounded'
+  rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
   border?: 'border-2' | 'border-4' | 'border-8'
   borderColor?: string
   predefined_avatar?: 'ai' | 'empty'
@@ -23,59 +18,72 @@ function UserAvatar(props: UserAvatarProps) {
   const session = useLHSession() as any
   const params = useParams() as any
 
-  function checkUrlProtocol(url: string): boolean {
-    return url.startsWith('https://') || url.startsWith('http://');
+  const isExternalUrl = (url: string): boolean => {
+    return url.startsWith('http://') || url.startsWith('https://')
   }
 
-  const predefinedAvatarFunc = () => {
-    if (props.predefined_avatar === 'ai') {
-      return getUriWithOrg(params.orgslug, '/ai_avatar.png')
-    }
-    if (props.predefined_avatar === 'empty') {
-      return getUriWithOrg(params.orgslug, '/empty_avatar.png')
+  const extractExternalUrl = (url: string): string | null => {
+    // Check if the URL contains an embedded external URL
+    const matches = url.match(/avatars\/(https?:\/\/[^/]+.*$)/)
+    if (matches && matches[1]) {
+      return matches[1]
     }
     return null
   }
 
-  const predefinedAvatar = predefinedAvatarFunc()
-  const emptyAvatar = getUriWithOrg(params.orgslug, '/empty_avatar.png') as any
-  const uploadedAvatar =  (session.status == 'authenticated') && (checkUrlProtocol(session?.data?.user?.avatar_image)) ? session?.data?.user?.avatar_image : getUserAvatarMediaDirectory(
-    session?.data?.user?.user_uuid,
-    session?.data?.user?.avatar_image
-  )
-
-  const useAvatar = () => {
+  const getAvatarUrl = (): string => {
+    // If predefined avatar is specified
     if (props.predefined_avatar) {
-      return predefinedAvatar
-    } else {
-      if (props.avatar_url) {
-        return props.avatar_url
-      } else {
-        if (session?.data?.user?.avatar_image) {
-          return uploadedAvatar
-        } else {
-          return emptyAvatar
-        }
-      }
+      const avatarType = props.predefined_avatar === 'ai' ? 'ai_avatar.png' : 'empty_avatar.png'
+      return getUriWithOrg(params.orgslug, `/${avatarType}`)
     }
+
+    // If avatar_url prop is provided
+    if (props.avatar_url) {
+      // Check if it's a malformed URL (external URL processed through getUserAvatarMediaDirectory)
+      const extractedUrl = extractExternalUrl(props.avatar_url)
+      if (extractedUrl) {
+        return extractedUrl
+      }
+      // If it's a direct external URL
+      if (isExternalUrl(props.avatar_url)) {
+        return props.avatar_url
+      }
+      // Otherwise use as is
+      return props.avatar_url
+    }
+
+    // If user has an avatar in session
+    if (session?.data?.user?.avatar_image) {
+      const avatarUrl = session.data.user.avatar_image
+      // If it's an external URL (e.g., from Google, Facebook, etc.), use it directly
+      if (isExternalUrl(avatarUrl)) {
+        return avatarUrl
+      }
+      // Otherwise, get the local avatar URL
+      return getUserAvatarMediaDirectory(session.data.user.user_uuid, avatarUrl)
+    }
+
+    // Fallback to empty avatar
+    return getUriWithOrg(params.orgslug, '/empty_avatar.png')
   }
 
-  useEffect(() => {
-
-    
-
-  }, [session.status])
-
   return (
     <img
       alt="User Avatar"
-      width={props.width ? props.width : 50}
-      height={props.width ? props.width : 50}
-      src={useAvatar()}
-      className={`${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'
-        }  ${props.border ? 'border ' + props.border : ''} ${props.borderColor ? props.borderColor : 'border-white'
-        } shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${props.width ? props.width : 50
-        }px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
+      width={props.width ?? 50}
+      height={props.width ?? 50}
+      src={getAvatarUrl()}
+      className={`
+        ${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'}
+        ${props.border ? `border ${props.border}` : ''}
+        ${props.borderColor ?? 'border-white'}
+        shadow-xl
+        aspect-square
+        w-[${props.width ?? 50}px]
+        h-[${props.width ?? 50}px]
+        ${props.rounded ?? 'rounded-xl'}
+      `}
     />
   )
 }