diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
index fd8f69afd906..2e686a44e391 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
@@ -14,13 +14,12 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { getImageAbsoluteURI } from 'twenty-shared';
 import {
+  Avatar,
   IconChevronDown,
   MenuItemSelectAvatar,
   UndecoratedLink,
 } from 'twenty-ui';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledLogo = styled.div<{ logo: string }>`
   background: url(${({ logo }) => logo});
@@ -102,13 +101,9 @@ export const MultiWorkspaceDropdownButton = ({
           data-testid="workspace-dropdown"
           isNavigationDrawerExpanded={isNavigationDrawerExpanded}
         >
-          <StyledLogo
-            logo={
-              getImageAbsoluteURI({
-                imageUrl: currentWorkspace?.logo ?? '',
-                baseUrl: REACT_APP_SERVER_BASE_URL,
-              }) ?? ''
-            }
+          <Avatar
+            placeholder={currentWorkspace?.displayName || ''}
+            avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
           />
           <NavigationDrawerAnimatedCollapseWrapper>
             <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
@@ -135,13 +130,9 @@ export const MultiWorkspaceDropdownButton = ({
               <MenuItemSelectAvatar
                 text={workspace.displayName ?? '(No name)'}
                 avatar={
-                  <StyledLogo
-                    logo={
-                      getImageAbsoluteURI({
-                        imageUrl: workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
-                        baseUrl: REACT_APP_SERVER_BASE_URL,
-                      }) ?? ''
-                    }
+                  <Avatar
+                    placeholder={workspace.displayName || ''}
+                    avatarUrl={workspace.logo ?? DEFAULT_WORKSPACE_LOGO}
                   />
                 }
                 selected={currentWorkspace?.id === workspace.id}
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
index 80d464aaced0..decd0475aa28 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
@@ -67,7 +67,7 @@ export const NavigationDrawerHeader = ({
         <MultiWorkspaceDropdownButton workspaces={workspaces} />
       ) : (
         <StyledSingleWorkspaceContainer>
-          <Avatar placeholder={name.charAt(0)} avatarUrl={logo} />
+          <Avatar placeholder={name} avatarUrl={logo} />
           <NavigationDrawerAnimatedCollapseWrapper>
             <StyledName>{name}</StyledName>
           </NavigationDrawerAnimatedCollapseWrapper>
diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index 35941629b6b2..0f17ca9edf10 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { isNonEmptyString, isUndefined } from '@sniptt/guards';
+import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards';
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -90,12 +90,10 @@ export const Avatar = ({
       })
     : null;
 
-  const noAvatarUrl = !isNonEmptyString(avatarImageURI);
-
   const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
 
   const showPlaceholder =
-    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);
+    isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI);
 
   const handleImageError = () => {
     if (isNonEmptyString(avatarImageURI)) {