diff --git a/src/components/ProfileLevel.tsx b/src/components/ProfileLevel.tsx
index a0cf7b3b..b3667008 100644
--- a/src/components/ProfileLevel.tsx
+++ b/src/components/ProfileLevel.tsx
@@ -4,6 +4,7 @@ import {levelCalculator} from "@/resources/level";
 import clsx from "clsx";
 import LevelLabel from "./LevelLabel";
 import LevelProgressBar from "./LevelProgressBar";
+import {Avatar} from "primereact/avatar";
 
 interface Props {
 	user: User;
@@ -15,8 +16,11 @@ export default function ProfileLevel({user, className}: Props) {
 
 	return (
 		<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
-			<div className="w-24 rounded-full">
-				<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+			<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
+				{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
+				{user.profilePicture.length === 0 && (
+					<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
+				)}
 			</div>
 			<div className="flex flex-col gap-1 items-center">
 				<LevelLabel experience={user.experience} />