diff --git a/components/XpProgressBar.tsx b/components/XpProgressBar.tsx
index adb5f15..b07dda3 100644
--- a/components/XpProgressBar.tsx
+++ b/components/XpProgressBar.tsx
@@ -2,18 +2,31 @@ import { User } from "@/lib/Types";
 import { xpRequiredForNextLevel } from "@/lib/Xp";
 import { useState } from "react";
 
-export default function XpProgressBar({ user, size }: { user: User, size: string }) {
-  const [hovered, setHovered] = useState(false);
+export default function XpProgressBar({
+	user,
+	size,
+}: {
+	user: User;
+	size: string;
+}) {
+	const [hovered, setHovered] = useState(false);
 
 	return (
 		<div
 			className={`radial-progress text-accent m-2 text-${hovered ? "xs" : "sm"}`}
-			style={{ "--value": user.xp / xpRequiredForNextLevel(user.level) * 100 , "--size": size } as any}
+			style={
+				{
+					"--value": (user.xp / xpRequiredForNextLevel(user.level)) * 100,
+					"--size": size,
+				} as any
+			}
 			role="progressbar"
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
 		>
-      {hovered ? `${user.xp}/${xpRequiredForNextLevel(user.level)}` : `Lvl ${user.level}`}
+			{hovered
+				? `${user.xp}/${xpRequiredForNextLevel(user.level)}`
+				: `Lvl ${user.level}`}
 		</div>
 	);
 }
diff --git a/pages/profile.tsx b/pages/profile.tsx
index f1d2074..9cae10d 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -121,7 +121,12 @@ export default function Profile(props: { teamList: Team[] }) {
 									<></>
 								)}
 							</Flex>
-							{ user != null && <XpProgressBar user={user} size="4rem" /> }
+							{user != null && (
+								<XpProgressBar
+									user={user}
+									size="4rem"
+								/>
+							)}
 						</div>
 					</Flex>
 				</Card>