diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
new file mode 100644
index 0000000..2f5083f
--- /dev/null
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -0,0 +1,102 @@
+.profile {
+	margin: 2rem 0;
+	background: var(--black1);
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	article {
+		display: flex;
+		flex-direction: row;
+		padding: 1.5rem 1.5rem 1rem 1.5rem;
+		gap: 1rem;
+		background-color: var(--black2);
+		border-radius: 8px 8px 0 0;
+		@media screen and (max-width: 400px) {
+			flex-direction: column;
+			justify-content: center;
+		}
+		img {
+			border-radius: 50%;
+			height: 128px;
+			width: 128px;
+			@media screen and (max-width: 600px) {
+				height: 64px;
+				width: 64px;
+			}
+		}
+		.inner {
+			width: 100%;
+			header {
+				display: flex;
+				flex-direction: row;
+				align-items: baseline;
+				justify-content: space-between;
+				width: 100%;
+				h1 {
+					font-size: 2rem;
+				}
+				p {
+					font-family: var(--fonts-bold);
+					span {
+						font-size: 2rem;
+					}
+				}
+			}
+			.badges {
+				display: flex;
+				flex-direction: row;
+				gap: 1rem;
+				margin: 8px 0;
+				.badge {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					width: initial;
+					gap: 8px;
+					padding: 4px 8px;
+					background: rgba(white, 0.1);
+					border-radius: 4px;
+					.dot {
+						width: 16px;
+						height: 16px;
+						border-radius: 50%;
+						background-color: #fb636b;
+					}
+				}
+			}
+		}
+	}
+	.xpinfo {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		background: var(--black2);
+		color: #ababab;
+		padding: 0 14px;
+	}
+	.xpbar {
+		display: block;
+		width: 100%;
+		height: 10px;
+		background: rgba(white, 0.025);
+		.xpinner {
+			display: block;
+			height: 100%;
+			width: 99%;
+			background: #fb636b;
+			opacity: 75%;
+		}
+	}
+	footer {
+		min-height: 16px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		section {
+			width: 50%;
+			padding: 2rem;
+			@media screen and (max-width: 800px) {
+				width: 100%;
+			}
+		}
+	}
+}
diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
new file mode 100644
index 0000000..626886e
--- /dev/null
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -0,0 +1,113 @@
+import styles from "./ProfileCard.module.scss";
+
+type UserProfileCardProps = {
+	username: string;
+	description?: string;
+	picture?: string | null;
+	isAdmin?: boolean;
+	isDeveloper?: boolean;
+	experience?: {
+		level: number;
+		tilNextLevel?: number;
+		looseXP?: number;
+	};
+	badges?: {
+		badgeName: string;
+		badgeDesc?: string;
+		badgeMerit?: string;
+		badgeImage?: string;
+	}[];
+	accentColor?: string;
+};
+
+let placeholderPicture = "https://placewaifu.com/image/128?greyscale&blur";
+
+const ProfileCard = (user: UserProfileCardProps) => {
+	return (
+		<>
+			<div className={styles.profile}>
+				<article>
+					<img src={user.picture || placeholderPicture} alt={user.username} />
+					<div className={styles.inner}>
+						<header>
+							<h1>{user.username}</h1>
+							<p>
+								{user.experience?.level && (
+									<>
+										{"LVL "}
+										<span>{user.experience.level}</span>
+									</>
+								)}
+							</p>
+						</header>
+						<p>{user.description}</p>
+						<div className={styles.badges}>
+							{user.isAdmin && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									Admin
+								</div>
+							)}
+							{user.isDeveloper && (
+								<div className={styles.badge}>
+									<div
+										className={styles.dot}
+										style={{ background: user.accentColor }}
+									/>
+									DEV
+								</div>
+							)}
+						</div>
+					</div>
+				</article>
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpinfo}>
+						<p>XP: {user.experience.looseXP}</p>
+						<p>XP until next level: {user.experience.tilNextLevel} </p>
+					</div>
+				)}
+				{user.experience?.looseXP && user.experience.tilNextLevel && (
+					<div className={styles.xpbar}>
+						<div
+							className={styles.xpinner}
+							style={{
+								background: user.accentColor,
+								width:
+									(
+										(user.experience.looseXP /
+											(user.experience.looseXP +
+												user.experience.tilNextLevel)) *
+										100
+									).toString() + "%",
+							}}
+						/>
+					</div>
+				)}
+				<footer>
+					{user.badges
+						?.slice(0, 1)
+						.map(
+							(el: {
+								badgeName: string;
+								badgeDesc?: string;
+								badgeMerit?: string;
+								badgeImage?: string;
+							}) => {
+								return (
+									<section>
+										<h3>{el.badgeName}</h3>
+										<p>{el.badgeDesc}</p>
+									</section>
+								);
+							}
+						)}
+				</footer>
+			</div>
+		</>
+	);
+};
+
+export { ProfileCard };
diff --git a/pages/ja.tsx b/pages/ja.tsx
index 2bf12b9..7265b81 100644
--- a/pages/ja.tsx
+++ b/pages/ja.tsx
@@ -1,8 +1,9 @@
-import styles from "../styles/Ja.module.scss";
 import { useUser } from "@auth0/nextjs-auth0/client";
+import { ProfileCard } from "../components/ProfileCard/ProfileCard";
 
 const PageMe = () => {
 	const { user, error, isLoading } = useUser();
+
 	return (
 		<>
 			{isLoading && (
@@ -14,15 +15,51 @@ const PageMe = () => {
 			{error && (
 				<main>
 					<h3>Wystąpił błąd.</h3>
-					<p>Tyle wiemy.</p>
+					<p>Tyle wiemy:</p>
+					<p>{error.name}</p>
+					<p>{error.message}</p>
 				</main>
 			)}
 			{!isLoading && !error && user && (
 				<main>
-					<div className={styles.header}>
-						<img src={user.picture || ""} alt={`${user.name}'s picture`} />
-						<h1>{user.name}</h1>
-					</div>
+					<ProfileCard
+						username={user.name || "unknown user"}
+						picture={user.picture}
+						description={"To Ty! Niezaprzeczalnie. ヽ(*・ω・)ﾉ"}
+						experience={{ level: 69, looseXP: 420, tilNextLevel: 270 }}
+						badges={[
+							{
+								badgeName: "Odkrywca internetowy",
+								badgeDesc: "Zalogowałeś się na stronę internetową gractwa.",
+							},
+							{
+								badgeName: "Technik Informatyk",
+								badgeDesc: "Łapanki na korytarzu to normalka.",
+							},
+							{
+								badgeName: "Rozpad PGTF",
+								badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
+							},
+							{
+								badgeName: "Mollin Stream",
+								badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
+							},
+							{
+								badgeName: "Alkoholik",
+								badgeDesc: "pracoholicy gdy skończy im się pracohol:",
+							},
+							{
+								badgeName: "Studnia Oneshot",
+								badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
+							},
+							{
+								badgeName: "RemCon 2022",
+								badgeDesc: "pomorze konwent",
+							},
+						]}
+						isAdmin
+						isDeveloper
+					/>
 				</main>
 			)}
 			{!isLoading && !user && (
diff --git a/styles/Ja.module.scss b/styles/Ja.module.scss
deleted file mode 100644
index fad7f83..0000000
--- a/styles/Ja.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.header {
-	margin: 2rem 0;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 1rem;
-	img {
-		height: 69px;
-		border-radius: 50%;
-	}
-	h1 {
-		font-size: 2rem;
-	}
-}