diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index d92ce0c..88db816 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -1,5 +1,7 @@
 # TomodachiShare Development Instructions
 
+This is probably outdated.
+
 Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
 
 ## Getting started
diff --git a/README.md b/README.md
index 37072a8..9282cb9 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="public/logo.svg" alt="TomodachiShare Logo" width="128" />
+  <img src="backend/public/logo.svg" alt="TomodachiShare Logo" width="128" />
 </p>
 
 <h1 align="center"><a href="https://tomodachishare.com">TomodachiShare</a></h1>
diff --git a/backend/src/app/report/mii/[id]/page.tsx b/backend/src/app/report/mii/[id]/page.tsx
deleted file mode 100644
index da40d1a..0000000
--- a/backend/src/app/report/mii/[id]/page.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Metadata } from "next";
-import { redirect } from "next/navigation";
-
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-
-import ReportMiiForm from "@/components/report/mii-form";
-
-interface Props {
-	params: Promise<{ id: string }>;
-}
-
-export const metadata: Metadata = {
-	title: "Report Mii - TomodachiShare",
-	description: "Report a Mii on TomodachiShare",
-	robots: {
-		index: false,
-		follow: false,
-	},
-};
-
-export default async function ReportMiiPage({ params }: Props) {
-	const session = await auth();
-	const { id } = await params;
-
-	const mii = await prisma.mii.findUnique({
-		where: {
-			id: Number(id),
-		},
-		include: {
-			_count: {
-				select: {
-					likedBy: true,
-				},
-			},
-		},
-	});
-
-	if (!session) redirect("/login");
-	if (!mii) redirect("/404");
-
-	return (
-		<div className="flex justify-center w-full">
-			<ReportMiiForm mii={mii} likes={mii._count.likedBy} />
-		</div>
-	);
-}
diff --git a/backend/src/app/report/user/[id]/page.tsx b/backend/src/app/report/user/[id]/page.tsx
deleted file mode 100644
index fae91bc..0000000
--- a/backend/src/app/report/user/[id]/page.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Metadata } from "next";
-import { redirect } from "next/navigation";
-
-import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
-
-import ReportUserForm from "@/components/report/user-form";
-
-interface Props {
-	params: Promise<{ id: string }>;
-}
-
-export const metadata: Metadata = {
-	title: "Report User - TomodachiShare",
-	description: "Report a user on TomodachiShare",
-	robots: {
-		index: false,
-		follow: false,
-	},
-};
-
-export default async function ReportUserPage({ params }: Props) {
-	const session = await auth();
-	const { id } = await params;
-
-	const user = await prisma.user.findUnique({
-		where: {
-			id: Number(id),
-		},
-	});
-
-	if (!session) redirect("/login");
-	if (!user) redirect("/404");
-
-	return (
-		<div className="flex justify-center w-full">
-			<ReportUserForm user={user} />
-		</div>
-	);
-}
diff --git a/backend/src/components/report/mii-form.tsx b/backend/src/components/report/mii-form.tsx
deleted file mode 100644
index fb65fdf..0000000
--- a/backend/src/components/report/mii-form.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import ReasonSelector from "./reason-selector";
-import SubmitButton from "../submit-button";
-import { Mii, ReportReason } from "@prisma/client";
-
-interface Props {
-	mii: Mii;
-	likes: number;
-}
-
-export default function ReportMiiForm({ mii, likes }: Props) {
-	const [reason, setReason] = useState<ReportReason>();
-	const [notes, setNotes] = useState<string>();
-	const [error, setError] = useState<string | undefined>(undefined);
-
-	const handleSubmit = async () => {
-		const response = await fetch(`/api/report`, {
-			method: "POST",
-			body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
-		});
-		const { error } = await response.json();
-
-		if (!response.ok) {
-			setError(error);
-			return;
-		}
-
-		// redirect(`/`);
-		window.location.href = "https://tomodachishare.com";
-	};
-
-	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
-			<div>
-				<h2 className="text-2xl font-bold">Report a Mii</h2>
-				<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
-			</div>
-
-			<hr className="border-zinc-300" />
-
-			<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
-				<img src={`/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
-				<div className="p-4">
-					<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
-					{/* <LikeButton likes={likes} isLiked={true} disabled /> */}
-				</div>
-			</div>
-
-			<div className="w-full grid grid-cols-3 items-center">
-				<label htmlFor="reason" className="font-semibold">
-					Reason
-				</label>
-				<ReasonSelector reason={reason} setReason={setReason} />
-			</div>
-
-			<div className="w-full grid grid-cols-3">
-				<label htmlFor="reason-note" className="font-semibold">
-					Reason notes
-				</label>
-				<textarea
-					rows={3}
-					maxLength={256}
-					placeholder="Type notes here for the report..."
-					className="pill input rounded-xl! resize-none col-span-2"
-					value={notes}
-					onChange={(e) => setNotes(e.target.value)}
-				/>
-			</div>
-
-			<hr className="border-zinc-300" />
-			<div className="flex justify-between items-center">
-				{error && <span className="text-red-400 font-bold">Error: {error}</span>}
-
-				<SubmitButton onClick={handleSubmit} className="ml-auto" />
-			</div>
-		</div>
-	);
-}
diff --git a/backend/src/components/report/user-form.tsx b/backend/src/components/report/user-form.tsx
deleted file mode 100644
index b7851ce..0000000
--- a/backend/src/components/report/user-form.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import ReasonSelector from "./reason-selector";
-import SubmitButton from "../submit-button";
-import { ReportReason, User } from "@prisma/client";
-import Image from "next/image";
-
-interface Props {
-	user: User;
-}
-
-export default function ReportUserForm({ user }: Props) {
-	const [reason, setReason] = useState<ReportReason>();
-	const [notes, setNotes] = useState<string>();
-	const [error, setError] = useState<string | undefined>(undefined);
-
-	const handleSubmit = async () => {
-		const response = await fetch(`/api/report`, {
-			method: "POST",
-			body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
-		});
-		const { error } = await response.json();
-
-		if (!response.ok) {
-			setError(error);
-			return;
-		}
-
-		window.location.href = "https://tomodachishare.com";
-	};
-
-	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
-			<div>
-				<h2 className="text-2xl font-bold">Report a User</h2>
-				<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
-			</div>
-
-			<hr className="border-zinc-300" />
-
-			<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
-				<Image
-					src={user.image ?? "/guest.png"}
-					alt="profile picture"
-					width={96}
-					height={96}
-					className="aspect-square rounded-full border-2 border-orange-400"
-				/>
-				<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
-			</div>
-
-			<div className="w-full grid grid-cols-3 items-center">
-				<label htmlFor="reason" className="font-semibold">
-					Reason
-				</label>
-				<ReasonSelector reason={reason} setReason={setReason} />
-			</div>
-
-			<div className="w-full grid grid-cols-3">
-				<label htmlFor="reason-note" className="font-semibold">
-					Reason notes
-				</label>
-				<textarea
-					rows={3}
-					maxLength={256}
-					placeholder="Type notes here for the report..."
-					className="pill input rounded-xl! resize-none col-span-2"
-					value={notes}
-					onChange={(e) => setNotes(e.target.value)}
-				/>
-			</div>
-
-			<hr className="border-zinc-300" />
-			<div className="flex justify-between items-center">
-				{error && <span className="text-red-400 font-bold">Error: {error}</span>}
-
-				<SubmitButton onClick={handleSubmit} className="ml-auto" />
-			</div>
-		</div>
-	);
-}
diff --git a/backend/src/components/submit-button.tsx b/backend/src/components/submit-button.tsx
deleted file mode 100644
index c5067a7..0000000
--- a/backend/src/components/submit-button.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Icon } from "@iconify/react";
-
-interface Props {
-	onClick: () => void | Promise<void>;
-	disabled?: boolean;
-	text?: string;
-	className?: string;
-}
-
-export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
-	const [isLoading, setIsLoading] = useState(false);
-
-	const handleClick = async (event: React.FormEvent) => {
-		event.preventDefault();
-
-		setIsLoading(true);
-		try {
-			await onClick();
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	return (
-		<button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
-			{text}
-			{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
-		</button>
-	);
-}
diff --git a/frontend/src/components/profile-information.tsx b/frontend/src/components/profile-information.tsx
deleted file mode 100644
index 67285ae..0000000
--- a/frontend/src/components/profile-information.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Icon } from "@iconify/react";
-
-import Description from "./description";
-import { useStore } from "@nanostores/react";
-import { session } from "../session";
-import { Link, useLocation } from "react-router";
-
-interface Props {
-	user?: any;
-}
-
-export default function ProfileInformation({ user }: Props) {
-	const location = useLocation();
-	const $session = useStore(session);
-
-	if (!user) return null;
-
-	const currentUser = user ?? $session?.user;
-	const page = location.pathname;
-	const isAdmin = currentUser?.id === Number(import.meta.env.VITE_ADMIN_USER_ID);
-	const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(user?.id);
-	const isOwnProfile = currentUser?.id === user?.id;
-
-	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
-			<div className="flex w-full gap-4 overflow-x-scroll">
-				{/* Profile picture */}
-				<Link to={`${import.meta.env.VITE_API_URL}/profile/${user.id}`} className="size-28 aspect-square">
-					<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center" />
-				</Link>
-				{/* User information */}
-				<div className="flex flex-col w-full relative py-3">
-					<div className="flex items-center gap-2">
-						<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
-						{isAdmin && (
-							<div data-tooltip="Admin" className="text-orange-400">
-								<Icon icon="mdi:shield-moon" className="text-2xl" />
-							</div>
-						)}
-						{isContributor && (
-							<div data-tooltip="Contributor" className="text-orange-400">
-								<Icon icon="mingcute:group-fill" className="text-2xl" />
-							</div>
-						)}
-					</div>
-					<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
-
-					<div className="mt-3 text-sm flex gap-8">
-						<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-							<span className="font-medium">Created:</span>{" "}
-							{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
-						</h4>
-						<h4>
-							Liked <span className="font-bold">{user._count.likes}</span> Miis
-						</h4>
-					</div>
-
-					{user.description && <Description text={user.description} className="max-h-32!" />}
-				</div>
-			</div>
-
-			{/* Buttons */}
-			<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
-				{!isOwnProfile && (
-					<Link aria-label="Report User" to={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
-						<Icon icon="material-symbols:flag-rounded" />
-						<span>Report</span>
-					</Link>
-				)}
-				{isOwnProfile && isAdmin && (
-					<Link aria-label="Go to Admin" to="/admin">
-						<Icon icon="mdi:shield-moon" />
-						<span>Admin</span>
-					</Link>
-				)}
-				{isOwnProfile && page !== "/profile/likes" && (
-					<Link aria-label="Go to My Likes" to="/profile/likes">
-						<Icon icon="icon-park-solid:like" />
-						<span>My Likes</span>
-					</Link>
-				)}
-				{isOwnProfile && page !== "/profile/settings" && (
-					<Link aria-label="Go to Settings" to="/profile/settings">
-						<Icon icon="material-symbols:settings-rounded" />
-						<span>Settings</span>
-					</Link>
-				)}
-				{(page === "/profile/likes" || page === "/profile/settings") && (
-					<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
-						<Icon icon="tabler:chevron-left" />
-						<span>Back</span>
-					</Link>
-				)}
-			</div>
-		</div>
-	);
-}
diff --git a/backend/src/components/report/reason-selector.tsx b/frontend/src/components/reason-selector.tsx
similarity index 96%
rename from backend/src/components/report/reason-selector.tsx
rename to frontend/src/components/reason-selector.tsx
index c3513d1..2f60226 100644
--- a/backend/src/components/report/reason-selector.tsx
+++ b/frontend/src/components/reason-selector.tsx
@@ -1,7 +1,5 @@
-"use client";
-
 import { Icon } from "@iconify/react";
-import { ReportReason } from "@prisma/client";
+import type { ReportReason } from "@tomodachi-share/shared";
 import { useSelect } from "downshift";
 
 interface Props {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 80b72d0..d863c9d 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -18,6 +18,8 @@ import LinkOutPage from "./pages/out.tsx";
 import Layout from "./layout.tsx";
 import ProfileLayout from "./pages/profile/layout.tsx";
 import ProfileLikesPage from "./pages/profile/likes.tsx";
+import ReportMiiPage from "./pages/report/mii.tsx";
+import ReportUserPage from "./pages/report/user.tsx";
 
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
@@ -34,6 +36,10 @@ createRoot(document.getElementById("root")!).render(
 						</Route>
 						<Route path="/submit" element={<SubmitPage />} />
 						<Route path="/login" element={<LoginPage />} />
+						<Route path="/report">
+							<Route path="mii/:id" element={<ReportMiiPage />} />
+							<Route path="profile/:id" element={<ReportUserPage />} />
+						</Route>
 						<Route path="/out" element={<LinkOutPage />} />
 						<Route path="/privacy" element={<PrivacyPage />} />
 						<Route path="/terms-of-service" element={<TermsOfServicePage />} />
diff --git a/frontend/src/pages/mii.tsx b/frontend/src/pages/mii.tsx
index 96de775..66e6163 100644
--- a/frontend/src/pages/mii.tsx
+++ b/frontend/src/pages/mii.tsx
@@ -294,7 +294,7 @@ export default function MiiPage() {
 							{/* <AuthorButtons mii={mii} /> */}
 
 							<ShareMiiButton miiId={mii.id} />
-							<Link aria-label="Report Mii" to={`${API_URL}/report/mii/${mii.id}`}>
+							<Link aria-label="Report Mii" to={`/report/mii/${mii.id}`}>
 								<Icon icon="material-symbols:flag-rounded" />
 								<span>Report</span>
 							</Link>
diff --git a/frontend/src/pages/profile/layout.tsx b/frontend/src/pages/profile/layout.tsx
index ca67835..7b762b2 100644
--- a/frontend/src/pages/profile/layout.tsx
+++ b/frontend/src/pages/profile/layout.tsx
@@ -1,8 +1,10 @@
 import { Outlet, useNavigate, useParams } from "react-router";
-import ProfileInformation from "../../components/profile-information";
 import { useEffect, useState } from "react";
 import { useStore } from "@nanostores/react";
 import { session } from "../../session";
+import { Icon } from "@iconify/react";
+import { Link } from "react-router";
+import Description from "../../components/description";
 
 export default function ProfileLayout() {
 	const { id } = useParams();
@@ -41,9 +43,93 @@ export default function ProfileLayout() {
 		return <div className="p-6 text-center">Loading...</div>;
 	}
 
+	const currentUser = user ?? $session?.user;
+	const page = location.pathname;
+	const isAdmin = currentUser?.id === Number(import.meta.env.VITE_ADMIN_USER_ID);
+	const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(user?.id);
+	const isOwnProfile = currentUser?.id === user?.id;
+
 	return (
 		<div>
-			<ProfileInformation user={user} />
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
+				<div className="flex w-full gap-4 overflow-x-scroll">
+					{/* Profile picture */}
+					<Link to={`/profile/${user.id}`} className="size-28 aspect-square">
+						<img
+							src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
+							onError={(e) => {
+								e.currentTarget.onerror = null; // Prevent infinite loops
+								e.currentTarget.src = "/guest.png";
+							}}
+							className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center"
+						/>
+					</Link>
+					{/* User information */}
+					<div className="flex flex-col w-full relative py-3">
+						<div className="flex items-center gap-2">
+							<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
+							{isAdmin && (
+								<div data-tooltip="Admin" className="text-orange-400">
+									<Icon icon="mdi:shield-moon" className="text-2xl" />
+								</div>
+							)}
+							{isContributor && (
+								<div data-tooltip="Contributor" className="text-orange-400">
+									<Icon icon="mingcute:group-fill" className="text-2xl" />
+								</div>
+							)}
+						</div>
+						<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
+
+						<div className="mt-3 text-sm flex gap-8">
+							<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
+								<span className="font-medium">Created:</span>{" "}
+								{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
+							</h4>
+							<h4>
+								Liked <span className="font-bold">{user._count.likes}</span> Miis
+							</h4>
+						</div>
+
+						{user.description && <Description text={user.description} className="max-h-32!" />}
+					</div>
+				</div>
+
+				{/* Buttons */}
+				<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
+					{!isOwnProfile && (
+						<Link aria-label="Report User" to={`/report/profile/${user.id}`}>
+							<Icon icon="material-symbols:flag-rounded" />
+							<span>Report</span>
+						</Link>
+					)}
+					{isOwnProfile && isAdmin && (
+						<Link aria-label="Go to Admin" to="/admin">
+							<Icon icon="mdi:shield-moon" />
+							<span>Admin</span>
+						</Link>
+					)}
+					{isOwnProfile && page !== "/profile/likes" && (
+						<Link aria-label="Go to My Likes" to="/profile/likes">
+							<Icon icon="icon-park-solid:like" />
+							<span>My Likes</span>
+						</Link>
+					)}
+					{isOwnProfile && page !== "/profile/settings" && (
+						<Link aria-label="Go to Settings" to="/profile/settings">
+							<Icon icon="material-symbols:settings-rounded" />
+							<span>Settings</span>
+						</Link>
+					)}
+					{(page === "/profile/likes" || page === "/profile/settings") && (
+						<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
+							<Icon icon="tabler:chevron-left" />
+							<span>Back</span>
+						</Link>
+					)}
+				</div>
+			</div>
+
 			<Outlet />
 		</div>
 	);
diff --git a/frontend/src/pages/report/mii.tsx b/frontend/src/pages/report/mii.tsx
new file mode 100644
index 0000000..66a7180
--- /dev/null
+++ b/frontend/src/pages/report/mii.tsx
@@ -0,0 +1,103 @@
+import { useNavigate, useParams } from "react-router";
+import ReasonSelector from "../../components/reason-selector";
+import { useEffect, useState } from "react";
+import { type ReportReason } from "@tomodachi-share/shared";
+import SubmitButton from "../../components/submit-button";
+
+export default function ReportMiiPage() {
+	const { id } = useParams();
+	const navigate = useNavigate();
+	const [reason, setReason] = useState<ReportReason>();
+	const [notes, setNotes] = useState<string>();
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const [mii, setMii] = useState<any>(null);
+	const [loading, setLoading] = useState(true);
+
+	const API_URL = import.meta.env.VITE_API_URL;
+
+	useEffect(() => {
+		fetch(`${API_URL}/api/mii/${id}/info`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch Mii");
+				return res.json();
+			})
+			.then((data) => {
+				setMii(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+				navigate("/404");
+			});
+	}, [id]);
+
+	if (loading || !mii) {
+		return <div className="p-6 text-center">Loading...</div>;
+	}
+
+	const handleSubmit = async () => {
+		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
+			method: "POST",
+			body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
+			credentials: "include",
+		});
+		const { error } = await response.json();
+
+		if (!response.ok) {
+			setError(error);
+			return;
+		}
+
+		navigate("/");
+	};
+
+	return (
+		<div className="grow flex items-center justify-center">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
+				<div>
+					<h2 className="text-2xl font-bold">Report a Mii</h2>
+					<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
+				</div>
+
+				<hr className="border-zinc-300" />
+
+				<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
+					<img src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
+					<div className="p-4">
+						<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
+					</div>
+				</div>
+
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="reason" className="font-semibold">
+						Reason
+					</label>
+					<ReasonSelector reason={reason} setReason={setReason} />
+				</div>
+
+				<div className="w-full grid grid-cols-3">
+					<label htmlFor="reason-note" className="font-semibold">
+						Reason notes
+					</label>
+					<textarea
+						rows={3}
+						maxLength={256}
+						placeholder="Type notes here for the report..."
+						className="pill input rounded-xl! resize-none col-span-2"
+						value={notes}
+						onChange={(e) => setNotes(e.target.value)}
+					/>
+				</div>
+
+				<hr className="border-zinc-300" />
+				<div className="flex justify-between items-center">
+					{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+					<SubmitButton onClick={handleSubmit} className="ml-auto" />
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/pages/report/user.tsx b/frontend/src/pages/report/user.tsx
new file mode 100644
index 0000000..378e1b6
--- /dev/null
+++ b/frontend/src/pages/report/user.tsx
@@ -0,0 +1,111 @@
+import { useNavigate, useParams } from "react-router";
+import ReasonSelector from "../../components/reason-selector";
+import { useEffect, useState } from "react";
+import { type ReportReason } from "@tomodachi-share/shared";
+import SubmitButton from "../../components/submit-button";
+
+export default function ReportUserPage() {
+	const { id } = useParams();
+	const navigate = useNavigate();
+	const [reason, setReason] = useState<ReportReason>();
+	const [notes, setNotes] = useState<string>();
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const [user, setUser] = useState<any>(null);
+	const [loading, setLoading] = useState(true);
+
+	const API_URL = import.meta.env.VITE_API_URL;
+
+	useEffect(() => {
+		fetch(`${API_URL}/api/profile/${id}/info`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch profile");
+				return res.json();
+			})
+			.then((data) => {
+				setUser(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+				navigate("/404");
+			});
+	}, [id]);
+
+	if (loading || !user) {
+		return <div className="p-6 text-center">Loading...</div>;
+	}
+
+	const handleSubmit = async () => {
+		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
+			method: "POST",
+			body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
+			credentials: "include",
+		});
+		const { error } = await response.json();
+
+		if (!response.ok) {
+			setError(error);
+			return;
+		}
+
+		navigate("/");
+	};
+
+	return (
+		<div className="grow flex items-center justify-center">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
+				<div>
+					<h2 className="text-2xl font-bold">Report a User</h2>
+					<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
+				</div>
+
+				<hr className="border-zinc-300" />
+
+				<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
+					<img
+						src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
+						onError={(e) => {
+							e.currentTarget.onerror = null; // Prevent infinite loops
+							e.currentTarget.src = "/guest.png";
+						}}
+						alt="profile picture"
+						width={96}
+						height={96}
+						className="aspect-square rounded-full border-2 border-orange-400"
+					/>
+					<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
+				</div>
+
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="reason" className="font-semibold">
+						Reason
+					</label>
+					<ReasonSelector reason={reason} setReason={setReason} />
+				</div>
+
+				<div className="w-full grid grid-cols-3">
+					<label htmlFor="reason-note" className="font-semibold">
+						Reason notes
+					</label>
+					<textarea
+						rows={3}
+						maxLength={256}
+						placeholder="Type notes here for the report..."
+						className="pill input rounded-xl! resize-none col-span-2"
+						value={notes}
+						onChange={(e) => setNotes(e.target.value)}
+					/>
+				</div>
+
+				<hr className="border-zinc-300" />
+				<div className="flex justify-between items-center">
+					{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+					<SubmitButton onClick={handleSubmit} className="ml-auto" />
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/shared/src/index.ts b/shared/src/index.ts
index 87d2715..9154268 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -2,4 +2,4 @@ export * from "./constants";
 export * from "./qr-codes";
 export * from "./switch";
 export * from "./three-ds-tomodachi-life-mii";
-export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform } from "./types";
+export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform, ReportReason } from "./types";
diff --git a/shared/src/types.d.ts b/shared/src/types.d.ts
index 1b513b0..d3a3e72 100644
--- a/shared/src/types.d.ts
+++ b/shared/src/types.d.ts
@@ -1,6 +1,7 @@
 type MiiGender = "MALE" | "FEMALE" | "NONBINARY";
 type MiiPlatform = "THREE_DS" | "SWITCH";
 type MiiMakeup = "FULL" | "PARTIAL" | "NONE";
+type ReportReason = "INAPPROPRIATE" | "SPAM" | "BAD_QUALITY" | "OTHER";
 
 export interface SwitchMiiInstructions {
 	head: {