diff --git a/app/views/WorkspaceView/ServerAvatar.stories.tsx b/app/views/WorkspaceView/ServerAvatar.stories.tsx
new file mode 100644
index 00000000000..c35e0690633
--- /dev/null
+++ b/app/views/WorkspaceView/ServerAvatar.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { themes } from '../../lib/constants/colors';
+import ServerAvatar from './ServerAvatar';
+import { ThemeContext, type TSupportedThemes } from '../../theme';
+
+export default {
+	title: 'WorkspaceView/ServerAvatar'
+};
+
+const BASE_URL = 'https://open.rocket.chat';
+
+const ThemedServerAvatar = ({
+	url = BASE_URL,
+	image,
+	theme = 'light'
+}: {
+	url?: string;
+	image?: string;
+	theme?: TSupportedThemes;
+}) => (
+	<ThemeContext.Provider
+		value={{
+			theme,
+			colors: themes[theme]
+		}}>
+		<ServerAvatar url={url} image={image} />
+	</ThemeContext.Provider>
+);
+
+export const WithImage = () => <ThemedServerAvatar image='images/logo/android-chrome-512x512.png' />;
+
+export const WithoutImage = () => <ThemedServerAvatar />;
+
+export const WithEmptyImage = () => <ThemedServerAvatar image='' />;
+
+export const Themes = () => (
+	<>
+		<ThemedServerAvatar image='images/logo/android-chrome-512x512.png' theme='light' />
+		<ThemedServerAvatar image='images/logo/android-chrome-512x512.png' theme='dark' />
+		<ThemedServerAvatar image='images/logo/android-chrome-512x512.png' theme='black' />
+	</>
+);
+
+export const SkeletonThemes = () => (
+	<>
+		<ThemedServerAvatar theme='light' />
+		<ThemedServerAvatar theme='dark' />
+		<ThemedServerAvatar theme='black' />
+	</>
+);
diff --git a/app/views/WorkspaceView/ServerAvatar.test.tsx b/app/views/WorkspaceView/ServerAvatar.test.tsx
new file mode 100644
index 00000000000..dd8beff666e
--- /dev/null
+++ b/app/views/WorkspaceView/ServerAvatar.test.tsx
@@ -0,0 +1,4 @@
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+import * as stories from './ServerAvatar.stories';
+
+generateSnapshots(stories);
diff --git a/app/views/WorkspaceView/ServerAvatar.tsx b/app/views/WorkspaceView/ServerAvatar.tsx
index 99a6e47f88d..5d14649428a 100644
--- a/app/views/WorkspaceView/ServerAvatar.tsx
+++ b/app/views/WorkspaceView/ServerAvatar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Image } from 'expo-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
 import { isTablet } from '../../lib/methods/helpers';
 import { useTheme } from '../../theme';
@@ -26,16 +27,21 @@ const styles = StyleSheet.create({
 
 interface IServerAvatar {
 	url: string;
-	image: string;
+	image?: string;
 }
 
-// TODO: missing skeleton
 const ServerAvatar = React.memo(({ url, image }: IServerAvatar) => {
 	const { colors } = useTheme();
 
 	return (
 		<View style={styles.container}>
-			{image && <Image style={[styles.image, { borderColor: colors.strokeLight }]} source={{ uri: `${url}/${image}` }} />}
+			{image ? (
+				<Image style={[styles.image, { borderColor: colors.strokeLight }]} source={{ uri: `${url}/${image}` }} />
+			) : (
+				<SkeletonPlaceholder backgroundColor={colors.surfaceNeutral} borderRadius={BORDER_RADIUS}>
+					<SkeletonPlaceholder.Item width={SIZE} height={SIZE} />
+				</SkeletonPlaceholder>
+			)}
 		</View>
 	);
 });