diff --git a/app/actions.ts b/app/actions.ts
index 2e51178..7e843f9 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -517,9 +517,12 @@ export async function fetchUserPageTitle(player: string | number) {
 export async function fetchUserPage(player: string | number) {
   const session = await getSession(true);
 
+  const osuMode =
+    (await cookies().get('OTR-user-selected-osu-mode')?.value) ?? '0';
+
   let res = await fetch(
-    `${process.env.REACT_APP_API_URL}/stats/${player}${
-      session?.playerId ? `?comparerId=${session?.playerId}` : ''
+    `${process.env.REACT_APP_API_URL}/stats/${player}?mode=${osuMode}${
+      session?.playerId ? `&comparerId=${session?.playerId}` : ''
     }`,
     {
       headers: {
diff --git a/app/users/[id]/error.module.css b/app/users/[id]/error.module.css
new file mode 100644
index 0000000..77c2c46
--- /dev/null
+++ b/app/users/[id]/error.module.css
@@ -0,0 +1,47 @@
+.errorDiv {
+  position: relative;
+  min-height: 60dvh;
+  height: 70dvh;
+  max-height: 70dvh;
+  margin: var(--main-padding);
+  margin-top: 0;
+}
+
+.errorDiv .content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--internal-gap);
+  gap: var(--internal-gap);
+  z-index: 2;
+}
+
+.errorDiv img {
+  z-index: 1;
+}
+
+.errorDiv h1 {
+  font-size: 4rem;
+}
+
+.errorDiv span {
+  font-size: 3.5rem;
+  letter-spacing: -2%;
+  text-align: center;
+  max-width: 40vw;
+}
+
+.errorDiv button {
+  margin-top: 1.3rem;
+  padding: 1rem 3rem;
+  width: fit-content;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  font-size: 1rem;
+  transition: background-color 0.2s ease-out;
+}
diff --git a/app/users/[id]/error.tsx b/app/users/[id]/error.tsx
new file mode 100644
index 0000000..93162b9
--- /dev/null
+++ b/app/users/[id]/error.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import backgroundError from '@/public/images/error-background.svg';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import Balancer from 'react-wrap-balancer';
+import styles from './error.module.css';
+
+const errors = {
+  '4': {
+    title: 'No data',
+    message: "You don't have any data for the selected ruleset",
+    reloadBtn: true,
+  },
+  '404': {
+    title: '404',
+    message: "We don't have that page",
+    reloadBtn: false,
+  },
+};
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  let errorContent = !isNaN(error.message)
+    ? errors[error.message]
+    : errors['404'];
+
+  return (
+    <div className={styles.errorDiv}>
+      <Image src={backgroundError} alt="Error background" fill />
+      <div className={styles.content}>
+        <h1>{errorContent.title}</h1>
+        <span>{errorContent.message}</span>
+        {errorContent.reloadBtn && (
+          <button
+            onClick={
+              // Attempt to recover by trying to re-render the segment
+              () => reset()
+            }
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}