diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 85a14cd48..5d8d873d0 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -6,7 +6,7 @@
 	import { updateUserProfile } from '$lib/apis/auths';
 
 	import UpdatePassword from './Account/UpdatePassword.svelte';
-	import { getGravatarUrl } from '$lib/apis/utils';
+	import { generateInitialsImage } from '$lib/utils';
 	import { copyToClipboard } from '$lib/utils';
 
 	const i18n = getContext('i18n');
@@ -19,28 +19,6 @@
 	let JWTTokenCopied = false;
 	let profileImageInputElement: HTMLInputElement;
 
-	const generateInitialsImage = (name) => {
-		const canvas = document.createElement('canvas');
-		const ctx = canvas.getContext('2d');
-		canvas.width = 100;
-		canvas.height = 100;
-
-		ctx.fillStyle = '#F39C12';
-		ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-		ctx.fillStyle = '#FFFFFF';
-		ctx.font = '40px Helvetica';
-		ctx.textAlign = 'center';
-		ctx.textBaseline = 'middle';
-		const initials = name
-			.split(' ')
-			.map((word) => word[0])
-			.join('');
-		ctx.fillText(initials.toUpperCase(), canvas.width / 2, canvas.height / 2);
-
-		return canvas.toDataURL();
-	};
-
 	const submitHandler = async () => {
 		const isInitialsImage: boolean =
 			profileImageUrl === generateInitialsImage($user.name) || profileImageUrl === '';
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 90d5d3c38..32830fed7 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -96,6 +96,28 @@ export const getGravatarURL = (email) => {
 	return `https://www.gravatar.com/avatar/${hash}`;
 };
 
+export const generateInitialsImage = (name) => {
+	const canvas = document.createElement('canvas');
+	const ctx = canvas.getContext('2d');
+	canvas.width = 100;
+	canvas.height = 100;
+
+	ctx.fillStyle = '#F39C12';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+	ctx.fillStyle = '#FFFFFF';
+	ctx.font = '40px Helvetica';
+	ctx.textAlign = 'center';
+	ctx.textBaseline = 'middle';
+	const initials = name
+		.split(' ')
+		.map((word) => word[0])
+		.join('');
+	ctx.fillText(initials.toUpperCase(), canvas.width / 2, canvas.height / 2);
+
+	return canvas.toDataURL();
+};
+
 export const copyToClipboard = (text) => {
 	if (!navigator.clipboard) {
 		const textArea = document.createElement('textarea');
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index d392e9f77..8788cbca6 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -5,6 +5,7 @@
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
+	import { generateInitialsImage } from '$lib/utils';
 
 	const i18n = getContext('i18n');
 
@@ -35,7 +36,7 @@
 	};
 
 	const signUpHandler = async () => {
-		const sessionUser = await userSignUp(name, email, password).catch((error) => {
+		const sessionUser = await userSignUp(name, email, password, generateInitialsImage(name)).catch((error) => {
 			toast.error(error);
 			return null;
 		});