diff --git a/pages/index.js b/pages/index.js
index dc4b640..a14f0a9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,69 +1,89 @@
 import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import { Component } from 'react'
+import Avatar from '../components/Avatar';
+import PlayerStats from '../components/PlayerStats';
 
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+// Why do u have to proxy requests... it's so dumb LOL
+const API_URL = "https://bangor375.herokuapp.com/https://scoresaber.com/api/player/%s/full";
 
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
+export default class Home extends Component {
 
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
+	constructor(props) {
+		super(props);
 
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
+		this.state = {
+			loading: true,
+			id: undefined,
+			isValidScoresaber: true,
+			data: undefined
+		}
+	}
 
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
+	async componentDidMount() {
+		const urlSearchParams = new URLSearchParams(window.location.search);
+		const params = Object.fromEntries(urlSearchParams.entries());
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
+		const id = params.id;
+		if (!id) { // Check if the id pararm is valid
+			this.setState({ loading: false, isValidScoresaber: false });
+			return;
+		}
 
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+		await this.updateData(id);
+		setTimeout(async () => {
+			if (!this.state.isValidScoresaber) {
+				return;
+			}
+			await this.updateData(id);
+		}, 30_000); // Update the scoresaber data every 30 seconds.
+	}
 
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}
+	async updateData(id) {
+		const data = await fetch(API_URL.replace("%s", id), {
+			mode: 'cors'
+		});
+		if (data.status == 422) { // invalid scoresaber
+			this.setState({ loading: false, isValidScoresaber: false });
+			return;
+		}
+		const json = await data.json();
+		if (json.errorMessage) {
+			this.setState({ loading: false, isValidScoresaber: false });
+			return;
+		}
+		this.setState({ loading: false, id: id, data: json });
+		console.log(json);
+	}
+
+	render() {
+		const { loading, isValidScoresaber, data } = this.state;
+
+		return <>
+			{ loading ? 
+			<>
+				<p>Loading...</p>
+			</>
+			: !isValidScoresaber ? 
+			<div className={'invalid-player'}>
+				<p>Provide a valid scoresaber id</p>
+				<p>Example: {document.location.origin}?id=76561198449412074</p>
+				<div className={'info'}>
+					<p>This is currently just a simple overlay displaying ScoreSaber stats.</p>
+					<p>If you have any suggestions you can message me on discord @ Fascinated#4719</p>
+				</div>
+			</div> :
+			<div className={'overlay'}>
+				<div className={'player-stats-container'}>
+					<Avatar url={data.profilePicture} />
+					<PlayerStats
+						pp={data.pp.toLocaleString()}
+						globalPos={data.rank.toLocaleString()}
+						country={data.country}
+						countryRank={data.countryRank.toLocaleString()}
+					/>
+				</div>
+			</div>
+			}
+		</>
+	}
+}
\ No newline at end of file
