diff --git a/front/components/ProgressBar.tsx b/front/components/ProgressBar.tsx
index bf9ea72..82b24cd 100644
--- a/front/components/ProgressBar.tsx
+++ b/front/components/ProgressBar.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { translate } from '../i18n/i18n';
-import { Box, Text, VStack, Progress, Stack, AspectRatio } from 'native-base';
+import { Box, Text, VStack, Progress, Stack } from 'native-base';
 import { useNavigation } from '../Navigation';
-import { Image } from 'native-base';
 import Card from '../components/Card';
+import UserAvatar from './UserAvatar';
 
 const ProgressBar = ({ xp }: { xp: number }) => {
 	const level = Math.floor(xp / 1000);
@@ -15,18 +15,8 @@ const ProgressBar = ({ xp }: { xp: number }) => {
 
 	return (
 		<Card w="100%" onPress={() => nav.navigate('User')}>
-			<Stack padding={4} space={2} direction="row">
-				<AspectRatio ratio={1}>
-					<Image
-						position="relative"
-						borderRadius={100}
-						source={{
-							uri: 'https://wallpaperaccess.com/full/317501.jpg', // TODO : put the actual profile pic
-						}}
-						alt="Profile picture"
-						zIndex={0}
-					/>
-				</AspectRatio>
+			<Stack padding={4} space={2} direction="row" alignItems="center">
+				<UserAvatar />
 				<VStack alignItems={'center'} flexGrow={1} space={2}>
 					<Text>{`${translate('level')} ${level}`}</Text>
 					<Box w="100%">
diff --git a/front/components/UserAvatar.tsx b/front/components/UserAvatar.tsx
new file mode 100644
index 0000000..8481c1d
--- /dev/null
+++ b/front/components/UserAvatar.tsx
@@ -0,0 +1,24 @@
+import { Avatar } from 'native-base';
+import API from '../API';
+import { useQuery } from '../Queries';
+
+const getInitials = (name: string) => {
+	return name
+		.split(' ')
+		.map((n) => n[0])
+		.join('');
+};
+
+type UserAvatarProps = Pick<Parameters<typeof Avatar>[0], 'size'>;
+
+const UserAvatar = ({ size }: UserAvatarProps) => {
+	const user = useQuery(API.getUserInfo);
+
+	return (
+		<Avatar size={size} source={{ uri: user.data?.data.avatar }} style={{ zIndex: 0 }}>
+			{user.data !== undefined && getInitials(user.data.name)}
+		</Avatar>
+	);
+};
+
+export default UserAvatar;
diff --git a/front/models/User.ts b/front/models/User.ts
index 49534eb..1f85df2 100644
--- a/front/models/User.ts
+++ b/front/models/User.ts
@@ -41,7 +41,7 @@ interface User extends Model {
 interface UserData {
 	gamesPlayed: number;
 	xp: number;
-	avatar: string | undefined;
+	avatar: string;
 	createdAt: Date;
 }
 
diff --git a/front/views/ProfileView.tsx b/front/views/ProfileView.tsx
index 892909d..0dd12ad 100644
--- a/front/views/ProfileView.tsx
+++ b/front/views/ProfileView.tsx
@@ -1,81 +1,11 @@
 import React from 'react';
 import { Dimensions, View } from 'react-native';
-import { Box, Image, Heading, HStack, Card, Text } from 'native-base';
-import Translate from '../components/Translate';
+import { Box, Image, Heading, HStack } from 'native-base';
 import { useNavigation } from '../Navigation';
 import TextButton from '../components/TextButton';
-
-const UserMedals = () => {
-	return (
-		<Card marginX={20} marginY={10}>
-			<Heading>
-				<Translate translationKey="medals" />
-			</Heading>
-			<HStack alignItems={'row'} space="10">
-				<Image
-					source={{
-						uri: 'https://wallpaperaccess.com/full/317501.jpg',
-					}}
-					alt="Profile picture"
-					size="lg"
-				/>
-				<Image
-					source={{
-						uri: 'https://wallpaperaccess.com/full/317501.jpg',
-					}}
-					alt="Profile picture"
-					size="lg"
-				/>
-				<Image
-					source={{
-						uri: 'https://wallpaperaccess.com/full/317501.jpg',
-					}}
-					alt="Profile picture"
-					size="lg"
-				/>
-				<Image
-					source={{
-						uri: 'https://wallpaperaccess.com/full/317501.jpg',
-					}}
-					alt="Profile picture"
-					size="lg"
-				/>
-			</HStack>
-		</Card>
-	);
-};
-
-const PlayerStats = () => {
-	const answer = 'Answer from back';
-
-	return (
-		<Card marginX={20} marginY={10}>
-			<Heading>
-				{' '}
-				<Translate translationKey="playerStats" />{' '}
-			</Heading>
-			<Text>
-				{' '}
-				<Translate translationKey="mostPlayedSong" /> {answer}{' '}
-			</Text>
-			<Text>
-				{' '}
-				<Translate translationKey="goodNotesPlayed" /> {answer}{' '}
-			</Text>
-			<Text>
-				{' '}
-				<Translate translationKey="longestCombo" /> {answer}{' '}
-			</Text>
-			<Text>
-				{' '}
-				<Translate translationKey="favoriteGenre" /> {answer}{' '}
-			</Text>
-		</Card>
-	);
-};
+import UserAvatar from '../components/UserAvatar';
 
 const ProfilePictureBannerAndLevel = () => {
-	const profilePic = 'https://wallpaperaccess.com/full/317501.jpg';
 	const username = 'Username';
 	const level = '1';
 
@@ -93,19 +23,13 @@ const ProfilePictureBannerAndLevel = () => {
 				size="lg"
 				style={{ height: imageHeight, width: imageWidth, zIndex: 0, opacity: 0.5 }}
 			/>
-			<Box zIndex={1} position={'absolute'} marginY={10} marginX={10}>
-				<Image
-					borderRadius={100}
-					source={{ uri: profilePic }}
-					alt="Profile picture"
-					size="lg"
-					style={{ position: 'absolute' }}
-				/>
-				<Box w="100%" paddingY={3} paddingLeft={100}>
+			<HStack zIndex={1} space={3} position={'absolute'} marginY={10} marginX={10}>
+				<UserAvatar size="lg" />
+				<Box>
 					<Heading>{username}</Heading>
 					<Heading>Level : {level}</Heading>
 				</Box>
-			</Box>
+			</HStack>
 		</View>
 	);
 };
@@ -116,8 +40,6 @@ const ProfileView = () => {
 	return (
 		<View style={{ flexDirection: 'column' }}>
 			<ProfilePictureBannerAndLevel />
-			<UserMedals />
-			<PlayerStats />
 			<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50} zIndex={1}>
 				<TextButton
 					onPress={() => navigation.navigate('Settings', { screen: 'profile' })}
diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx
index a2ff6a0..7d072d3 100644
--- a/front/views/settings/SettingsProfileView.tsx
+++ b/front/views/settings/SettingsProfileView.tsx
@@ -2,19 +2,13 @@ import API from '../../API';
 import { useDispatch } from 'react-redux';
 import { unsetAccessToken } from '../../state/UserSlice';
 import React from 'react';
-import { Column, Text, Button, Box, Flex, Center, Heading, Avatar, Popover } from 'native-base';
+import { Column, Text, Button, Box, Flex, Center, Heading, Popover } from 'native-base';
 import TextButton from '../../components/TextButton';
 import { LoadingView } from '../../components/Loading';
 import ElementList from '../../components/GtkUI/ElementList';
 import { translate } from '../../i18n/i18n';
 import { useQuery } from '../../Queries';
-
-const getInitials = (name: string) => {
-	return name
-		.split(' ')
-		.map((n) => n[0])
-		.join('');
-};
+import UserAvatar from '../../components/UserAvatar';
 
 // Too painful to infer the settings-only, typed navigator. Gave up
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -41,9 +35,7 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 				}}
 			>
 				<Center>
-					<Avatar size="2xl" source={{ uri: user.data.avatar }}>
-						{getInitials(user.name)}
-					</Avatar>
+					<UserAvatar size="2xl" />
 				</Center>
 				<ElementList
 					style={{