diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
index 67ecf34..91c898e 100644
--- a/src/app/profile/[id]/page.tsx
+++ b/src/app/profile/[id]/page.tsx
@@ -1,13 +1,10 @@
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
-import Image from "next/image";
-import Link from "next/link";
-
-import { Icon } from "@iconify/react";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
+import ProfileInformation from "@/components/profile-information";
 import MiiList from "@/components/mii-list";
 
 interface Props {
@@ -78,54 +75,9 @@ export default async function ProfilePage({ params }: Props) {
 
 	if (!user) redirect("/404");
 
-	const likedMiis = await prisma.like.count({ where: { userId: Number(id) } });
-
 	return (
 		<div>
-			<div className="flex gap-4 mb-2">
-				<Image
-					src={user?.image ?? "/missing.svg"}
-					alt="profile picture"
-					width={128}
-					height={128}
-					className="size-32 aspect-square rounded-full bg-white border-2 border-amber-500 shadow"
-				/>
-
-				<div className="flex flex-col w-full relative">
-					<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
-						{user?.name}
-						{user.id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
-							<div data-tooltip="Admin" className="font-normal text-orange-400">
-								<Icon icon="mdi:shield-moon" />
-							</div>
-						)}
-					</h1>
-					<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
-
-					<h4 className="mt-auto text-sm">
-						Liked <span className="font-bold">{likedMiis}</span> Miis
-					</h4>
-					<h4 className="text-sm" title={`${user?.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-						Created: {user?.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
-					</h4>
-				</div>
-
-				<div className="flex flex-col items-end justify-end gap-1">
-					{Number(session?.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
-						<Link href="/admin" className="pill button !px-4 !py-1.5 text-sm w-min !justify-start">
-							<Icon icon="mdi:shield-moon" className="text-lg mr-2" />
-							<span>Admin</span>
-						</Link>
-					)}
-					{session?.user.id == id && (
-						<Link href="/profile/settings" className="pill button !px-4 w-full h-min !justify-start">
-							<Icon icon="material-symbols:settings-rounded" className="text-2xl mr-2" />
-							<span>Settings</span>
-						</Link>
-					)}
-				</div>
-			</div>
-
+			<ProfileInformation user={user} createdAt={user.createdAt} />
 			<MiiList isLoggedIn={session?.user != null} userId={user?.id} sessionUserId={Number(session?.user.id ?? -1)} />
 		</div>
 	);
diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx
index e5e056f..6728f74 100644
--- a/src/app/profile/settings/page.tsx
+++ b/src/app/profile/settings/page.tsx
@@ -9,6 +9,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
 import ProfileSettings from "@/components/profile-settings";
+import ProfileInformation from "@/components/profile-information";
 
 export const metadata: Metadata = {
 	title: "Profile Settings - TomodachiShare",
@@ -25,44 +26,10 @@ export default async function ProfileSettingsPage() {
 	if (!session) redirect("/login");
 
 	const userExtra = await prisma.user.findUnique({ where: { id: Number(session.user.id) } });
-	const likedMiis = await prisma.like.count({ where: { userId: Number(session.user.id) } });
 
 	return (
 		<div>
-			<div className="flex gap-4 mb-2">
-				<Image
-					src={session.user.image ?? "/missing.svg"}
-					alt="profile picture"
-					width={128}
-					height={128}
-					className="aspect-square rounded-full bg-white border-2 border-amber-500 shadow"
-				/>
-
-				<div className="flex flex-col w-full relative">
-					<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
-						{session.user.name}
-						{Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
-							<div data-tooltip="Admin" className="font-normal text-orange-400">
-								<Icon icon="mdi:shield-moon" />
-							</div>
-						)}
-					</h1>
-					<h2 className="text-lg font-semibold break-words">@{session.user.username}</h2>
-
-					<h4 className="mt-auto">
-						Liked <span className="font-bold">{likedMiis}</span> Miis
-					</h4>
-					<h4 className="text-sm" title={`${userExtra!.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-						Created: {userExtra!.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
-					</h4>
-
-					<Link href={`/profile/${session.user.id}`} className="pill button absolute right-0 bottom-0 !px-4">
-						<Icon icon="tabler:chevron-left" className="text-2xl mr-2" />
-						<span>Back</span>
-					</Link>
-				</div>
-			</div>
-
+			<ProfileInformation createdAt={userExtra!.createdAt} inSettings />
 			<ProfileSettings />
 		</div>
 	);
diff --git a/src/components/profile-information.tsx b/src/components/profile-information.tsx
new file mode 100644
index 0000000..4eab2f9
--- /dev/null
+++ b/src/components/profile-information.tsx
@@ -0,0 +1,78 @@
+import Image from "next/image";
+import { User } from "@prisma/client";
+import { Icon } from "@iconify/react";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import Link from "next/link";
+
+interface Props {
+	user?: User;
+	createdAt: Date;
+	inSettings?: boolean;
+}
+
+export default async function ProfileInformation({ user: userData, createdAt, inSettings }: Props) {
+	const session = await auth();
+
+	const id = userData && userData.id ? userData.id : Number(session?.user.id);
+	const user = userData ? userData : session?.user;
+
+	const likedMiis = await prisma.like.count({ where: { userId: id } });
+
+	return (
+		<div className="flex gap-4 mb-2 max-md:flex-col">
+			<div className="flex w-full gap-4 overflow-x-scroll">
+				{/* Profile picture */}
+				<Image
+					src={user?.image ?? "/missing.svg"}
+					alt="profile picture"
+					width={128}
+					height={128}
+					className="size-32 aspect-square rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
+				/>
+				{/* User information */}
+				<div className="flex flex-col w-full relative">
+					<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
+						{user?.name}
+						{id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
+							<div data-tooltip="Admin" className="font-normal text-orange-400">
+								<Icon icon="mdi:shield-moon" />
+							</div>
+						)}
+					</h1>
+					<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
+
+					<h4 className="mt-auto text-sm">
+						Liked <span className="font-bold">{likedMiis}</span> Miis
+					</h4>
+					<h4 className="text-sm" title={`${createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
+						Created: {createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
+					</h4>
+				</div>
+			</div>
+
+			{/* Buttons */}
+			<div className="flex flex-col items-end justify-end gap-1 max-md:flex-row">
+				{Number(session?.user.id) == id && Number(session?.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
+					<Link href="/admin" className="pill button !px-4">
+						<Icon icon="mdi:shield-moon" className="text-2xl mr-2" />
+						<span>Admin</span>
+					</Link>
+				)}
+				{!inSettings && Number(session?.user.id) == id && (
+					<Link href="/profile/settings" className="pill button !px-4">
+						<Icon icon="material-symbols:settings-rounded" className="text-2xl mr-2" />
+						<span>Settings</span>
+					</Link>
+				)}
+				{inSettings && (
+					<Link href={`/profile/${id}`} className="pill button !px-4">
+						<Icon icon="tabler:chevron-left" className="text-2xl mr-2" />
+						<span>Back</span>
+					</Link>
+				)}
+			</div>
+		</div>
+	);
+}